怎么做一個網(wǎng)站介紹門指路人地圖標(biāo)注服務(wù)中心的位置和信息？

willsonlin

門老師

淺斟明月

Justsolo

喵日天

地圖

可以使用地圖

教程：

找到圖上這個點擊進(jìn)去，然后登陸賬號

點擊“控制臺”，找到應(yīng)用管理，點擊“我的應(yīng)用”

可以看到如上圖所示，我創(chuàng)建的自己公司的地圖，點擊“創(chuàng)建應(yīng)用”

圖上所示根據(jù)自己需求填寫

提交完之后，可以看到已經(jīng)添加成功了

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

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

<script type="text/javascript">

//創(chuàng)建和初始化地圖函數(shù)：

function initMap(){

createMap();//創(chuàng)建地圖

setMapEvent();//設(shè)置地圖

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

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

}

//創(chuàng)建地圖函數(shù)：

function createMap(){

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

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

map.centerAndZoom(nt,18);//設(shè)定地圖的網(wǎng)點點和坐標(biāo)并將地圖顯示在地圖容器中

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

}

//地圖設(shè)置函數(shù)：

function setMapEvent(){

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

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

map.enableDoubleClickZoom();//啟用鼠標(biāo)雙擊放大，默認(rèn)啟用(可不寫)

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

}

//地圖控件添加函數(shù)：

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);

}

//標(biāo)注點數(shù)組

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

];

//創(chuàng)建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);

}

})()

}

}

//創(chuàng)建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;

}

//創(chuàng)建一個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();//創(chuàng)建和初始化地圖

</script>

坐標(biāo)獲取方法

點擊進(jìn)去，搜素位置

如果上圖所示就能獲取到坐標(biāo)。

最后將代碼放置到，你網(wǎng)站想放的地方。