JavaScript API添加多个Maker和InfoWindow
Posted jayeblog
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript API添加多个Maker和InfoWindow相关的知识,希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" /> <meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="black" name="apple-mobile-web-app-status-bar-style" /> <meta content="telephone=no" name="format-detection" /> <title>标记点击事件</title> <style type="text/css"> * padding: 0; margin: 0; .mapContainer position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; #container /*地图(容器)显示大小*/ position: relative; width: 100%; height: 100%; </style> <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script> </head> <body> <div class="mapContainer"> <div id="container"></div> </div> <script> //初始化标记数据 var dataSource=["id":0,"fullname":"邵阳县","lat":26.99078,"lng":111.27382,"id":1,"fullname":"隆回县","lat":27.11402,"lng":111.03249,"id":2,"fullname":"洞口县","lat":27.06038,"lng":110.57583,"id":3,"fullname":"新宁县","lat":26.43346,"lng":110.85674,"id":4,"fullname":"城步苗族自治县","lat":26.39156,"lng":110.32285,"id":5,"fullname":"桑植县","lat":29.39971,"lng":110.16428,"id":6,"fullname":"沅陵县","lat":28.45277,"lng":110.39388,"id":7,"fullname":"溆浦县","lat":27.90834,"lng":110.59486,"id":8,"fullname":"麻阳苗族自治县","lat":27.86555,"lng":109.80256,"id":9,"fullname":"通道侗族自治县","lat":26.15794,"lng":109.78449,"id":10,"fullname":"泸溪县","lat":28.21639,"lng":110.21965,"id":11,"fullname":"凤凰县","lat":27.94843,"lng":109.59832,"id":12,"fullname":"保靖县","lat":28.70001,"lng":109.66054,"id":13,"fullname":"古丈县","lat":28.61711,"lng":109.95085,"id":14,"fullname":"永顺县","lat":29.00515,"lng":109.84807,"id":15,"fullname":"龙山县","lat":29.4579,"lng":109.44387,"id":16,"fullname":"花垣县","lat":28.57211,"lng":109.48224,"id":17,"fullname":"新化县","lat":27.72663,"lng":111.32743,"id":18,"fullname":"涟源市","lat":27.69271,"lng":111.66446] //初始化地图 var init = function() var center = new qq.maps.LatLng(27.56974, 110.0016); var map = new qq.maps.Map(document.getElementById(‘container‘), center: center,//设置地图中心点坐标 zoom:8, //设置地图缩放级别 pitch: 43.5, //设置俯仰角 rotation: 45 //设置地图旋转角度 ); //循环创建标记 for (let i = 0; i < dataSource.length; i++) //创建标记 let markPosition=new qq.maps.LatLng(dataSource[i].lat,dataSource[i].lng); var marker = new qq.maps.Marker( position: markPosition, map: map ); //标记点击居中 qq.maps.event.addListener(marker, ‘click‘, function(event) // console.log(event.latLng.getLat());//获取当前坐标点的纬度 // console.log(event.latLng.getLng());//获取当前坐标点的经度 var ne = new qq.maps.LatLng((parseFloat(event.latLng.getLat())+0.04).toFixed(6),(parseFloat(event.latLng.getLng())+0.04).toFixed(6));//东北角坐标 var sw = new qq.maps.LatLng((parseFloat(event.latLng.getLat())-0.04).toFixed(6),(parseFloat(event.latLng.getLng())-0.04).toFixed(6));//西南角坐标 var latLngBounds = new qq.maps.LatLngBounds(sw, ne) map.fitBounds(latLngBounds); //根据指定的范围调整地图视野 ) //添加到提示窗 var info = new qq.maps.InfoWindow( map: map, position:markPosition, content:"<a href=‘#‘ target=‘_blank‘ style=‘text-decoration: none;color: #666;font-size: 12px;‘><img src=‘./imgtest/2.png‘ width=‘50‘><p>特产名称</p></a>" ); info.open(); window.onload=function() init() </script> </body> </html>
ps:点击Marker试图区自动居中
以上是关于JavaScript API添加多个Maker和InfoWindow的主要内容,如果未能解决你的问题,请参考以下文章
调用百度地图 API 移动地图时 maker 始终在地图中间 并根据maker 经纬度 返回地址
使用 google map javascript api v3 在 google map 上添加多个目的地