多个地点"/>
腾讯地图显示多个地点
腾讯地图文档
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>为多个marker添加事件</title>
</head>
<script charset="utf-8"src="=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">html,body {height: 100%;margin: 0px;padding: 0px;}#container {width: 100%;height: 100%;}#info {position: absolute;left: 30px;top: 30px;background: #FFF;width: 350px;height: 120px;padding: 10px;border-radius: 3px;}p,h4 {margin: 0;padding: 0;margin-bottom: 10px;}h4{margin-top: 30px;}#add {position: absolute;left:10px;top: 10px;z-index: 9999;}#remove{position: absolute;left: 120px;top: 10px;z-index: 9999;}
</style><body><div id="container"></div><div id="info"><h4 id="txt"></h4><p id="markerid"></p><!-- <p id="position">当前marker位置：39.984104,116.407503</p> --></div><script>var txt = document.getElementById("txt");var markerID = document.getElementById("markerid");var position = document.getElementById("position");var center = new TMap.LatLng(39.984104, 116.307503);//设置中心点坐标//初始化地图var map = new TMap.Map("container", {center: center});//初始化markervar marker = new TMap.MultiMarker({id: 'marker-layer',map: map,styles: {"marker": new TMap.MarkerStyle({"width": 25,"height": 35,"anchor": { x: 16, y: 32 },"src": '.png'})},geometries: [{"id": "店铺1","styleId": 'maker',"position": new TMap.LatLng(39.954104, 116.357503),"properties": {"title": "marker1"}}, {"id": "店铺2","styleId": 'marker',"position": new TMap.LatLng(39.994104, 116.287503),"properties": {"title": "marker2"}}, {"id": "店铺3","styleId": 'marker',"position": new TMap.LatLng(39.984104, 116.307503),"properties": {"title": "marker3"}}]});//监听回调函数（非匿名函数）var eventClick = function (evt) {markerID.innerHTML = "markerID:" + evt.geometry.id;// position.innerHTML = "当前marker位置：" + evt.geometry.position.toString();}//监听marker点击事件marker.on("click", eventClick)</script>
</body></html>更多推荐
腾讯地图显示多个地点
发布评论