- <div class="map block" id="map"></div>// 地图
- <div class="replace block l w-100"></div>// 地图对应坐标显示信息
- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=key"></script> http://api.map.baidu.com/api?v=2.0&ak=key%22%3E%3C/script%3E ;
- <script>
- // 创建地图实例
- var map = new BMap.Map("map");
- var point = new BMap.Point(120.159878, 30.296262);
- map.centerAndZoom(point, 14);
- var myIcon = new BMap.Icon("img/locat-map.png", new BMap.Size(25, 35));
- var PIcon = new BMap.Icon("img/p.png", new BMap.Size(25, 35));
- var mkr = new BMap.Marker(point, {
- icon: myIcon
- });
- map.addOverlay(mkr);
- mkr.addEventListener("click",searchInfoWindow);
- var content='<div class="block fff pd-1 mt-5">'
- +'<p class="block black"><span class="l f-18">XX 停车场 </span><span class="r"> 可充电</span></p>'
- +'<p class="block black">'
- + '<span > 泊位: 23/33</span>'
- + '<span > 价格: 2 元 / 0.5 分钟</span>'
- +'</p>'
- +'<p class="block black">距您当前位置: 200 米 & nbsp; 距离您目标地 100 米</p>'
- +'<p class="block black pt-5 mb-0 b-t">'
- + '<span class="l lh-30 mui-col-xs-6 inblock text-c">收藏</span>'
- + '<span class="r lh-30 mui-col-xs-6 inblock text-c">到这里去</span>'
- +'</p>'
- +'</div>';
- function searchInfoWindow(e){
- var p = e.target;
- if(p instanceof BMap.Marker){
- $(".replace").html(content);
- }else{
- alert("无法获知该覆盖物类型");
- }
- }
- // 添加定位控件
- var geolocationControl = new BMap.GeolocationControl();
- geolocationControl.addEventListener("locationSuccess", function(e){
- // 定位成功事件
- var address = '';
- address += e.addressComponent.province;
- address += e.addressComponent.city;
- address += e.addressComponent.district;
- address += e.addressComponent.street;
- address += e.addressComponent.streetNumber;
- console.log("当前定位地址为:" + address);
- });
- geolocationControl.addEventListener("locationError",function(e){
- // 定位失败事件
- console.log(e.message);
- });
- map.addControl(geolocationControl);
- // 随机向地图添加 5 个标注
- var bounds = map.getBounds();
- var sw = bounds.getSouthWest();
- var ne = bounds.getNorthEast();
- var lngSpan = Math.abs(sw.lng - ne.lng);
- var latSpan = Math.abs(ne.lat - sw.lat);
- for (var i = 0; i <5; i ++) {
- var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
- addMarker(point);
- }
- // 编写自定义函数, 创建标注
- function addMarker(point){
- var marker = new BMap.Marker(point,{icon:PIcon});
- map.addOverlay(marker);
- marker.addEventListener("click",searchInfoWindow);
- }
- </script>
来源: http://www.qdfuns.com/article/39849/18a240066d49f99f52c0ba9e515b7419.html