JS怎么调用百度地图生成多个城市的轮廓图,并且点击轮廓图时,根据JSON数据生成标识点和信息弹窗,请给出示例代码
时间: 2024-06-10 18:09:02 浏览: 160
调用百度地图api标记多个城市示例代码
5星 · 资源好评率100%
以下是一个例子,可以使用百度地图API生成多个城市的轮廓图,并且根据JSON数据生成标识点和信息弹窗:
```
// 在HTML中引入百度地图API
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
// 创建地图实例
var map = new BMap.Map("container");
// 设置地图中心点和缩放级别
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
// 添加多边形覆盖物
var polygon = new BMap.Polygon([
new BMap.Point(116.387112,39.920977),
new BMap.Point(116.385243,39.913063),
new BMap.Point(116.394226,39.917988)
], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(polygon);
// 添加标识点和信息弹窗
var marker = new BMap.Marker(new BMap.Point(116.404, 39.915));
var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
'<img src="https://www.baidu.com/img/bd_logo1.png" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
'地址:北京市海淀区上地十街10号<br/>电话:(010)59928888<br/>简介:百度公司成立于2000年1月,是全球最大的中文搜索引擎、最大的中文网站。</div>';
var infoWindow = new BMap.InfoWindow(content);
map.addOverlay(marker);
marker.addEventListener("click", function(){
this.openInfoWindow(infoWindow);
});
```
请注意,这只是一个简单的示例,您需要根据自己的实际需求进行修改和完善。
阅读全文