百度地图开发总结----2.标注和信息弹窗

接着上一个继续大笑,下面看代码:

<div id="content">

  </div>
  <script type="text/javascript">
var mp = new BMap.Map('content');
     mp.enableScrollWheelZoom();//地图随鼠标滑轮滚动放大缩小的功能
var mypoint=new BMap.Point(117.302545, 31.849278);//定义一个坐标对象
//初始化地图的中心位置
     mp.centerAndZoom(mypoint, 15);   //第二个参数代表地图的放大级数,目前是1-18 
var opt1 = { type: BMAP_NAVIGATION_CONTROL_LARGE }     //导航控件样式
     mp.addControl(new BMap.NavigationControl(opt1));
     mp.addControl(new BMap.OverviewMapControl());         //略缩图控件
     mp.addControl(new BMap.ScaleControl({ offset: new BMap.Size(75, 500) }));
     //比例尺控件
     mp.addControl(new BMap.MapTypeControl());     
mp.clearOverlays();//清除地图上的覆盖物
var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif", new BMap.Size(300,157));//改变标注的图案。
var pt=new BMap.Point(117.303545, 31.848278);
var marker=new BMap.Marker(pt,{icon:myIcon});//创建标注,参数是坐标对象
mp.addOverlay(marker);// 将标注添加到地图中 
var opt={width:160,height:80,title:"标题信息"};//信息弹窗属性设置
var infoWindow=new BMap.InfoWindow("性名:张三<br/>地址:合肥",opt);
mp.openInfoWindow(infoWindow,pt);
marker.addEventListener("click", function () { mp.openInfoWindow(infoWindow, pt); });//给标注添加点击事件
</script>

效果:


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue中使用百度地图信息,你可以按照以下步骤进行操作: 1. 首先,确保你已经引入了百度地图的JavaScript API,并获取了API密钥。 2. 在Vue组件中,可以使用一个单独的div元素作为信息的容器。在该组件的模板中添加这个div元素,用于展示地图信息的内容。 3. 在Vue组件的方法中,创建一个函数来显示地图信息。你可以使用百度地图的API来实现这个功能。例如,你可以使用`new BMap.InfoWindow(content, opts)`来创建一个信息对象,并使用`map.openInfoWindow(infoWindow, point)`来将添加到地图上的指定位置。 以下是一个简单的示例代码: ```vue <template> <div> <!-- 地图容器 --> <div id="map"></div> </div> </template> <script> export default { mounted() { // 在组件挂载后初始化地图 this.initMap(); }, methods: { initMap() { // 创建地图实例 const map = new BMap.Map("map"); // 设置地图中心点和缩放级别 const point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); // 添加标注 const marker = new BMap.Marker(point); map.addOverlay(marker); // 添加点击事件,显示信息 marker.addEventListener("click", () => { this.showInfoWindow(map, marker); }); }, showInfoWindow(map, marker) { // 信息内容 const content = "这里是信息的内容"; // 创建信息对象 const infoWindow = new BMap.InfoWindow(content); // 打开信息 map.openInfoWindow(infoWindow, marker.getPosition()); } } }; </script> <style> #map { width: 100%; height: 400px; } </style> ``` 在上面的示例代码中,我们在Vue组件的模板中添加了一个id为"map"的div元素,作为地图的容器。在mounted钩子函数中,调用了initMap方法来初始化地图。在initMap方法中,我们创建了一个地图实例,并设置了地图的中心点和缩放级别,然后添加了一个标注,并为标注添加了点击事件。点击标注时,会调用showInfoWindow方法来显示信息。 showInfoWindow方法中,我们创建了一个信息对象,并使用map.openInfoWindow方法将添加到地图上的标注位置。 这样,当用户点击地图上的标注时,就会显示出信息,并展示出相应的内容。 希望对你有所帮助!如果有任何疑问,请随时问我。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值