怎么做一個網站介紹門指路人地圖標注服務中心的位置和信息？

willsonlin

門老師

淺斟明月

Justsolo

喵日天

地圖

可以使用地圖

教程：

找到圖上這個點擊進去，然后登陸賬號

點擊“控制臺”，找到應用管理，點擊“我的應用”

可以看到如上圖所示，我創建的自己公司的地圖，點擊“創建應用”

圖上所示根據自己需求填寫

提交完之后，可以看到已經添加成功了

<script type="text/javascript" src="鏈接這里就添加應用AK，就是你在地圖開發平臺添加的應用"></script>

<div class="p07d" id="dituContent"></div>

<script type="text/javascript">

//創建和初始化地圖函數：

function initMap(){

createMap();//創建地圖

setMapEvent();//設置地圖

addMapControl();//向地圖添加控件

addMarker();//向地圖中添加marker

}

//創建地圖函數：

function createMap(){

var map = new BMap.Map("dituContent");//在地圖容器中創建一個地圖

var nt = new BMap.Point(12
1.491118,3
1.242761);//定義一個網點點坐標，坐標的話，去搜索“網點坐標”，首頁第一個就是，所要標注的地點，即可看到坐標

map.centerAndZoom(nt,18);//設定地圖的網點點和坐標并將地圖顯示在地圖容器中

window.map = map;//將map變量存儲在全局

}

//地圖設置函數：

function setMapEvent(){

map.enableDragging();//啟用地圖拖拽，默認啟用(可不寫)

map.enableScrollWheelZoom();//啟用地圖滾輪放大縮小

map.enableDoubleClickZoom();//啟用鼠標雙擊放大，默認啟用(可不寫)

map.enableKeyboard();//啟用鍵盤上下左右鍵移動地圖

}

//地圖控件添加函數：

function addMapControl(){

//向地圖中添加縮放控件

var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});

map.addControl(ctrl_nav);

//向地圖中添加縮略圖控件

var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});

map.addControl(ctrl_ove);

//向地圖中添加比例尺控件

var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});

map.addControl(ctrl_sca);

}

//標注點數組

var markerArr = [{title:"填寫網站名稱",content:"這里可以填地址<br />這里可以填寫電話",nt:"這里也是填寫坐標",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}

];

//創建marker

function addMarker(){

for(var i=0;i<markerArr.length;i++){

var on = markerArr[i];

var p0 = on.nt.split("|")[0];

var p1 = on.nt.split("|")[1];

var nt = new BMap.Point(p0,p1);

var iconImg = createIcon(on.icon);

var marker = new BMap.Marker(nt,{icon:iconImg});

var iw = createInfoWindow(i);

var label = new BMap.Label(on.title,{"offset":new BMap.Size(on.icon.lb-on.icon.x+10,-20)});

marker.setLabel(label);

map.addOverlay(marker);

label.setStyle({

borderColor:"#808080",

color:"#333",

cursor:"nter"

});

(function(){

var index = i;

var _iw = createInfoWindow(i);

var _marker = marker;

_marker.addEventListener("click",function(){

this.openInfoWindow(_iw);

});

_iw.addEventListener("open",function(){

_marker.getLabel().hide();

})

_iw.addEventListener("close",function(){

_marker.getLabel().show();

})

label.addEventListener("click",function(){

_marker.openInfoWindow(_iw);

})

if(!!on.isOpen){

label.hide();

_marker.openInfoWindow(_iw);

}

})()

}

}

//創建InfoWindow

function createInfoWindow(i){

var on = markerArr[i];

var iw = new BMap.InfoWindow("<b class='iw__title' title='" + on.title + "'>" + on.title + "</b><div class='iw__content'>"+on.content+"</div>");

return iw;

}

//創建一個Icon

function createIcon(on){

var icon = new BMap.Icon("鏈接", new BMap.Size(on.w,on.h),{imageOffset: new BMap.Size(-on.l,-on.t),infoWindowOffset:new BMap.Size(on.lb+5,1),offset:new BMap.Size(on.x,on.h)})

return icon;

}

initMap();//創建和初始化地圖

</script>

坐標獲取方法

點擊進去，搜素位置

如果上圖所示就能獲取到坐標。

最后將代碼放置到，你網站想放的地方。