百度地图标点实现vue

infowindow 多窗口我不会,有大佬会的.希望可以教教我!

vue代码如下:

<template><!--地图容器--><div id="XSDFXPage" class="XSDFXPage"></div></template>
<script>export default {data () {return {}},mounted() {//创建和初始化地图函数：function initMap(){createMap();//创建地图setMapEvent();//设置地图事件// addMapControl();//向地图添加控件addMarker();//向地图中添加marker}//创建地图函数：function createMap(){//创建Map实例var map = new BMap.Map("XSDFXPage");// 初始化地图,设置中心点坐标var point = new BMap.Point(116.404, 39.915);// 创建点坐标map.centerAndZoom(point,12);//添加鼠标滚动缩放map.enableScrollWheelZoom();window.map = map;}//地图事件设置函数：function setMapEvent(){map.enableDragging();//启用地图拖拽事件，默认启用(可不写)map.enableScrollWheelZoom();//启用地图滚轮放大缩小map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)map.enableKeyboard();//启用键盘上下左右键移动地图}//地图控件添加函数：function addMapControl(){//向地图中添加缩放控件var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});map.addControl(ctrl_nav);//向地图中添加缩略图控件var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});map.addControl(ctrl_ove);//向地图中添加比例尺控件var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});map.addControl(ctrl_sca);}//标注点数组var markerArr =[{title: "起点",content: "我的备注1",point: "116.301934|39.977552",isOpen: 0,icon: {w: 21, h: 21, l: 0, t: 0, x: 6, lb: 5}},{title: "终点",content: "我的备注2",point: "116.508328|39.919141",isOpen: 0,icon: {w: 21, h: 21, l: 0, t: 0, x: 6, lb: 5}},];//创建markerfunction addMarker(){for(var i=0;i<markerArr.length;i++){var json = markerArr[i];var p0 = json.point.split("|")[0];var p1 = json.point.split("|")[1];var point = new BMap.Point(p0,p1);var iconImg = createIcon(json.icon);var marker = new BMap.Marker(point,{icon:iconImg});var iw = createInfoWindow(i);var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+5,-20)});marker.setLabel(label);map.addOverlay(marker);label.setStyle({borderColor:"#808080",color:"#333",cursor:"pointer"});(function(){var index = i;var _iw = createInfoWindow(i);var _marker = marker;_marker.addEventListener("click",function(){this.openInfoWindow(_iw);});_iw.addEventListener("open",function(){_marker.getLabel().hide();})_iw.addEventListener("close",function(){_marker.getLabel().show();})label.addEventListener("click",function(){_marker.openInfoWindow(_iw);})if(!!json.isOpen){label.hide();_marker.openInfoWindow(_iw);}})()}}//创建InfoWindowfunction createInfoWindow(i){var json = markerArr[i];var iw = newBMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>" + json.content + "</div>");return iw;}//创建一个Iconfunction createIcon(json){var icon = newBMap.Icon("http://webmap0.map.bdstatic.com/wolfman/static/common/images/us_cursor_9517a2b.png",new BMap.Size(10,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})return icon;}initMap();//创建和初始化地图}}
</script>
<style scoped>/*html,body,#XSDFXPage{*//*width: 50%;*//*height: 50%;*//*overflow: hidden;*//*margin: 0px auto;*//*font-family: "微软雅黑";*//*}*/#XSDFXPage{width: 100%;height: 600px;}</style>

代码dome

github源码:

百度地图标点实现vue相关推荐

html引入百度地图报错,vue引入百度地图BMapGL，或者其他个性化地图
3.jpg vue的百度地图早就有vue-baidu-map这里就不赘述了, 自己去直接对着API写就好了,基本上已经满足绝大多数需求了还简单方便. vue-baidu-map 传送门 https:/ ...
Android 百度地图标点定位，动画标点
前期实现与"定位"中步骤相同,参考: 代码片段中: import android.content.Intent; import android.support.v7.app.App ...
web页面调用百度地图，在百度页面标注多个标点，为百度地图标点添加标注，点击标点跳转到百度地图进行导航。
一.显示地图配置申请百度地图 AK http://lbsyun.baidu.com/apiconsole/key 有了ak自己上代码注意代码中一定要把自己的ak填入 <%@ page lan ...
百度地图标点鼠标样式更改
需求:修改百度地图红点悬停鼠标样式,有链接的鼠标悬停显示为pointer点击跳转,没有链接的红点悬停后显示鼠标默认样式. 分析1: 核心对象分析,找到红点对象 API查询红点对象控制鼠标样式的方法百 ...
php 百度地图范围搜索,Vue 使用百度地图实现搜索定位
要求能定位到国外及查看了文档百度支持东南亚大部分地区满足需求从而使用百度地图当前选中:{{mapPointName}} 确认 geoc= null; exportdefault{ nam ...
vue整合百度地图（关键字检索）
百度地图文章目录百度地图一.申请百度地图的密钥二.官方示例三.使用vue整合百度地图步骤说明 3.1 效果图: 3.2 方式一 vue脚手架2.0版本引用(不推荐): 3.3 方式二封装成 ...
vue 页面使用百度地图
前言 vue 3.x 百度地图JavaScript API GL v1.0 百度地图的源码编辑器:http://lbs.baidu.com/jsdemo.htm#webgl0_0 本文代码在百度地图的 ...
VUE中使用百度地图BaiduMap
VUE中使用百度地图BaiduMap 以前在html页中使用了echart,做了很多图表,也集成了百度地图,效果很好.最近,开始研究vue加 .net core的框架,所以也想把echart和百度地图 ...
Vue导入百度地图BMap
在项目的根目录下的index.html文件中添加如下代码 <script src="https://api.map.baidu.com/api?v=2.0&ak=此处填写申请的 ...

百度地图标点实现vue

vue代码如下:

代码dome

百度地图标点实现vue相关推荐

最新文章

热门文章