介绍 & lt; div类=癲emo_main"比;
& lt;自定义字段类=癲emo_content"祝辞
& lt; div类=白钚「叨?400 px;宽度:100%;“id=癿ap"祝辞& lt;/div>
& lt;脚本类型=拔谋?javascript"比;
var markerArr=[
{
标题:“名称:锦江区门诊部“,
观点:“104.118821、30.642073”;
地址:“成都市锦江区通源街188号“,
电话:“028 - 86712080”;
}，
{
标题:“名称:青羊区门诊部“,
观点:“104.000092、30.672099”;
地址:“成都市青羊区春晓路15号“,
电话:“028 - 81067120”;
}，
{
标题:“名称:高新区门诊部“,
观点:“104.061895、30.556204”;
地址:“成都市高新区益州大道中段和天府二街交叉口复城国际T3-2号“,
电话:“028 - 81067120”;
}，
];
var地图;//地图实例
函数map_init () {
地图=new BMap.Map (“map");//第1步:设置地图中心点,成都市
var=new BMap.Point点(104.082684,30.656319);//第2步:初始化地图,设置中心点坐标和地图级别。
地图。centerAndZoom(点,13);//第3步:启用滚轮放大缩小
map.enableScrollWheelZoom(真正的);//第4步:向地图中添加缩放控件
var ctrlNav=new window.BMap.NavigationControl ({
主播:BMAP_ANCHOR_TOP_LEFT,
类型:BMAP_NAVIGATION_CONTROL_LARGE
}）;
map.addControl (ctrlNav);//第5步:向地图中添加缩略图控件
var ctrlOve=new window.BMap.OverviewMapControl ({
主播:BMAP_ANCHOR_BOTTOM_RIGHT,
isOpen: 1
}）;
map.addControl (ctrlOve);//第6步:向地图中添加比例尺控件
var ctrlSca=new window.BMap.ScaleControl ({
主播:BMAP_ANCHOR_BOTTOM_LEFT
}）;
map.addControl (ctrlSca);//第7步:绘制点
(var=0;我& lt;markerArr.length;我+ +){
var p0=markerArr[我].point.split (“”) [0];
var p1=markerArr[我].point.split (“”) [1];
var=addMarker(新window.BMap制造商。点(p0, p1),我);
addInfoWindow(制造商markerArr[我]i);
}
}//添加标注
指数函数addMarker(点){
var myIcon=new BMap.Icon (“http://api.map.baidu.com/img/markers.png"
新的BMap。大小(23、25){
抵消:新BMap。大小(10、25)
新BMap imageOffset:。大小(0,0 -指数* 25)
}）;
var=new BMap标志。标记(点,{
图标:myIcon
}）;
map.addOverlay(标记);
返回标记;
}//添加信息窗口
函数addInfoWindow(标记,poi) {//弹出弹窗标题
var title=& # 39; & lt; div风格=按窒?大胆,颜色:# CE5521;字体大小:14 px"祝辞& # 39;+ poi。标题+ & # 39;& lt;/div> & # 39;;//弹出弹窗信息
var html=[];
html.push (& # 39; & lt;表格单元格间距=?”;风格=氨聿季?固定;宽度:100%;字体:12 px arial, simsun, sans-serif"祝辞& lt; tbody> & # 39;);
html.push (& # 39; & lt; tr> & # 39;);
html.push (& # 39; & lt; td风格=皏ertical-align:最高;行高:16 px;宽度:38 px;空白:nowrap;}单词分割:keep-all"在地址:& lt;/td> & # 39;);
html.push (& # 39; & lt; td风格=皏ertical-align:最高;行高:16 px"祝辞& # 39;+ poi。地址+ & # 39;& lt;/td> & # 39;);
html.push (& # 39; & lt;/tr> & # 39;);
html.push (& # 39; & lt;/tbody> & lt;/table> & # 39;);
var infoWindow=new BMap.InfoWindow (html.join (““), {
标题:标题、
宽度:200
}）;
var openInfoWinFun=function () {
marker.openInfoWindow (infoWindow);
}；
marker.addEventListener (“click" openInfoWinFun);
返回openInfoWinFun;
}//异步调用百度js
函数map_load () {
var负荷=document.createElement (“script");
负载。src=" http://api.map.baidu.com/api?v=1.4&callback=map_init " https://www.yisu.com/zixun/;
document.body.appendChild(负载);
}
窗口。onload=map_load;>
小编给大家分享一下js -百度地图多个标注点的实现方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
