这两天在开发项目的过程中遇到一个需求需要引入百度地图增加导航功能，话不多说直接上代码
首先引入百度地图API输入在百度地图API申请的秘钥
<script type="text/javascript" src="//api./api?v=2.0&ak=申请的key"></script><script type="text/javascript" src="//api./api?type=webgl&v=1.0&ak=申请的key"></script><link rel="stylesheet" href="//api./library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" /><script src="//mapopen./github/BMapGLLib/DrawingManager/src/DrawingManager.min.js"></script>
随后我们先初始化地图
<div id="wapmap" class="amap-wrapper"></div>
mounted() {this.BaiDuMapInit();},methods:{// 初始化地图BaiDuMapInit() {let wapmap = new BMap.Map("wapmap");wapmap.enableScrollWheelZoom(true); //开启鼠标滚轮缩放wapmap.clearOverlays(); // 清除覆盖物let point = new BMap.Point(116.404269,39.916042);wapmap.centerAndZoom(point, 15);}}
创建检索信息窗口对象
var content = '<div style="margin:0;line-height:20px;padding:2px;">' +'<img src="../img/baidu.jpg" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +'地址：北京市海淀区上地十街10号<br/>电话：(010)59928888<br/>简介：百度大厦位于北京市海淀区西二旗地铁站附近，为百度公司综合研发及办公总部。' +'</div>';//创建检索信息窗口对象var searchInfoWindow = null;searchInfoWindow = new BMapLib.SearchInfoWindow(wapmap , content, {title : "月亮大厦",//标题width : 290, //宽度height : 105, //高度panel : "panel", //检索结果面板enableAutoPan : true,//自动平移searchTypes :[BMAPLIB_TAB_SEARCH, //周边检索BMAPLIB_TAB_TO_HERE, //到这里去BMAPLIB_TAB_FROM_HERE //从这里出发]});
添加marker对象
var marker = new BMap.Marker(poi); //创建marker对象marker.enableDragging(); //marker可拖拽marker.addEventListener("click", function(e){searchInfoWindow.open(marker);})wapmap.addOverlay(marker); //在地图中添加marker
最终页面展示效果
完整代码
<template><div class="Map"><div id="wapmap" class="amap-wrapper"></div></div></template><script>export default {mounted() {this.BaiDuMapInit();},methods: {// 初始化地图BaiDuMapInit() {let wapmap = new BMap.Map("wapmap");wapmap.enableScrollWheelZoom(true); //开启鼠标滚轮缩放wapmap.clearOverlays(); // 清除覆盖物let point = new BMap.Point(116.404269, 39.916042);wapmap.centerAndZoom(point, 15);var content ='<div style="margin:0;line-height:20px;padding:2px;">' +'<img src="../img/baidu.jpg" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +"地址：北京市海淀区上地十街10号<br/>电话：(010)59928888<br/>简介：月亮大厦位于北京市海淀区西二旗地铁站附近，为综合研发及办公总部。" +"</div>";//创建检索信息窗口对象var searchInfoWindow = null;searchInfoWindow = new BMapLib.SearchInfoWindow(wapmap, content, {title: "月亮大厦", //标题width: 290, //宽度height: 105, //高度panel: "panel", //检索结果面板enableAutoPan: true, //自动平移searchTypes: [BMAPLIB_TAB_SEARCH, //周边检索BMAPLIB_TAB_TO_HERE, //到这里去BMAPLIB_TAB_FROM_HERE, //从这里出发],});var marker = new BMap.Marker(point); //创建marker对象marker.enableDragging(); //marker可拖拽marker.addEventListener("click", function (e) {searchInfoWindow.open(marker);});wapmap.addOverlay(marker); //在地图中添加marker},},};</script><style lang="scss" scoped>.Map {position: fixed;width: 100%;height: 100%;.amap-wrapper {width: 100%;height: 100%;}}</style>
