如何在網中使用百度地圖API自定義個性化地圖

時間 2019-11-13

標籤如何網中使用百度地圖 api 自定義個性化简体版

原文原文鏈接

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="百度地圖,百度地圖API，百度地圖自定義工具，百度地圖所見即所得工具" />
<meta name="description" content="百度地圖API自定義地圖，幫助用戶在可視化操做下生成百度地圖" />
<title>百度地圖API自定義地圖</title>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=17b7Lhnf06x0CMZLI3aYn5ZIdMxfGcyc"></script>
</head>

<body>

<div style="width:100%;height:550px;border:#ccc solid 1px;font-size:12px" id="map"></div>
</body>
<script type="text/javascript">
//建立和初始化地圖函數：
function initMap(){
createMap();//建立地圖
setMapEvent();//設置地圖事件
addMapControl();//向地圖添加控件
addMapOverlay();//向地圖添加覆蓋物
}
function createMap(){
map = new BMap.Map("map");
map.centerAndZoom(new BMap.Point(116.421218,40.068393),15);
}
function setMapEvent(){
map.enableScrollWheelZoom();
map.enableKeyboard();
map.enableDragging();
map.enableDoubleClickZoom()
}
function addClickHandler(target,window){
target.addEventListener("click",function(){
target.openInfoWindow(window);
});
}
function addMapOverlay(){
var markers = [
{content:"哈哈哈",title:"禹辰時代",imageOffset: {width:0,height:3},position:{lat:40.072424,lng:116.420931}}
];
for(var index = 0; index < markers.length; index++ ){
var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);
var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{
imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)
})});
var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)});
var opts = {
width: 200,
title: markers[index].title,
enableMessage: false
};javascript