vue调用高德地图实现导航,vue高德地图路线规划
在不久的将来，vue将用于一个环保项目，该项目需要使用高德地图。下面文章主要介绍Vue接入高德地图的相关信息。通过示例代码介绍的非常详细，有需要的朋友可以参考一下。
目录
前言参考Vue访问高德地图引用使用点击按钮缩放功能放大地图缩小地图缩小测量距离测量面积行政区划查询渲染关键词搜索鼠标绘制面积汇总
前言
Vue使用高德地图实现缩放、鼠标绘制、测距、面积测量、行政区域绘制、关键字查询等操作。
参考资料
地图API官网：https://lbs.amap.com/
高德地图2.0参考手册：https://lbs.amap.com/api/jsapi-v2/documentation#pixel
高德地图2.0示例代码：https://lbs.amap.com/demo/list/jsapi-v2
Vue接入高德地图
引用
首相将把高德的地图引入index.html文件。
script type= text/JavaScript src= https://webapi . AMAP . com/maps？V=2.0key=你为plugin申请的键值=AMap。工具栏/脚本
使用
在需要编写地图的页面上添加一个div来显示地图。记得设置好这个div的高度和宽度，否则无法显示。
div id=mapDiv/div
然后写TS代码显示地图。
//加载地图
initMap() {
map=新AMap。地图( mapDiv ，{
缩放：11，//级别
中心：[116.34703902，40.48188]，//中心点的坐标
查看模式：“3D”//使用3D视图
});
},
然后地图出现了。
实现点击按钮缩放功能
首先，写两个静态按钮。缩放也很简单，就两行代码。
地图放大
map.zoomIn()
地图缩小
map.zoomOut()
测量距离
测量距离有点麻烦，但还不算太差。
首先，我们需要在初始化地图后创建一个鼠标画图工具。
//使用距离测量和面积测量
mouseTool=新AMap。MouseTool(地图)；
MouseTool插件需要在index.html文件的脚本中引入，即可以加在plugin参数后面，用英文逗号隔开。
script type= text/JavaScript src= https://webapi . AMAP . com/maps？V=2.0key=你为plugin=amap.toolbar，amap.mousetool/script申请的键值
然后写一个按钮“测距”，点击后执行测距方法。
//开始测距
start() {
mouseTool.rule({
StartMarkerOptions:{///默认值
图标：新地图。图标({
尺寸：新AMap。Size(19，31)，//图标大小
imageSize:新的AMap。尺寸(19，31)，
image:“//webapi . AMAP . com/theme/v 1.3/markers/b/start . png”
}),
偏移：新的AMap。像素(-9，-31)
},
end marker options:{///默认值
图标：新地图。图标({
尺寸：新AMap。Size(19，31)，//图标大小
imageSize:新的AMap。尺寸(19，31)，
image:“//webapi . AMAP . com/theme/v 1.3/markers/b/end . png”
}),
偏移：新的AMap。像素(-9，-31)
},
mid marker options:{///可以默认。
图标：新地图。图标({
尺寸：新AMap。Size(19，31)，//图标大小
imageSize:新的AMap。尺寸(19，31)，
image://webapi . AMAP . com/theme/v 1.3/markers/b/mid . png
}),
偏移：新的AMap。像素(-9，-31)
},
LineOptions: {//默认
strokeStyle:“实心”，
strokeColor: #FF33FF ，
strokeOpacity: 1，
冲程重量：2
}
//与RangingTool的自定义设置相同，默认为默认样式。
});
}
//停止测距
stop() {
MouseTool.close(true)//关闭，并清除盖子。
}
测量面积
测量面积类似于测距。
//开始测量面积
start() {
mouseTool.measureArea({
strokeColor: #80d8ff ，
fillColor: #80d8ff ，
填充不透明度：0.3
});
}
//停止测量面积
stop() {
MouseTool.close(true)//关闭，并清除盖子。
}
很简单！
行政区划查询渲染
这也很简单，宝贝们！
首先拿接口来说行政区划的范围。
你需要这个插件，AMap。区域搜索，并像测距一样将其引入index.html。
然后在初始化映射完成时实例化它。
//搜索行政区域
地区=新地图。地区搜索(opts)；
首先编写一个输入框，输入要查询的行政区划名称，例如输入“北京”，然后点击按钮按照下面的方法查询北京行政区划的范围信息。
//行政区划搜索
seachArea() {
if (this.areaInput===) {
Map.remove(areaPolygons)//清除最后一个结果
返回；
}
district.search(this.areaInput，(status，result)={
Map.remove(areaPolygons)//清除最后一个结果
area polygons=[]；
var bounds=result . district list[0]。界限；
if (bounds) {
for (var i=0，l=bounds.lengthI l；i ) {
//生成行政区划多边形
var polygon=新地图。多边形({
strokeWeight: 3，
path: bounds[i]，
fillOpacity: 0
fillColor: #80d8ff ，
strokeColor:“红色”
});
area polygons . push(polygon)；
}
}
map.add(面积多边形)
map . setfitview(area polygons)；//视口适应
});
},
关键字搜索
其实这和行政区划查询差不多。
首先，你需要在地图初始化完成后创建一个关键字查询的实例。
//关键字搜索
AMap.plugin([AMap。PlaceSearch]，()={
//构造一个地点查询类
placeSearch=新地图。地点搜索({
PageSize: 50，//单页显示的结果数
Page: 1，//页码
AutoFitView: false //是否自动调整地图视野，使绘制的所有标记点都在视口的可视范围内？
});
});
还有其他参数，可以根据官方文件选择使用。
有一个输入框，输入要查询的关键词，然后一个按钮就可以进入查询相关关键词的界面。然后，您将返回一个包含关键字搜索数据的列表。
searchKeyWord() {
PlaceSearch.search(北京，(州，数据)={
this.total=0
让dataList=data
开关(dataList.info) {
案例“正常”:
console.log( -，dataList.poiList.pois)
打破；
案例“TIP_CITIES”:
console.log( -，dataList.cityList)
打破；
}
});
}
如果上面的信息没问题，logo返回一个位置列表；如果是TIP_CITIES，logo返回以下城市搜索关键词的相关数据。
例如，搜索北京，返回一个地点列表。
比如搜索“动物园”，返回相关城市列表。
鼠标绘制区域
这很简单，只需点击一个按钮开始绘制多边形。
//绘制区域
startPolygon() {
polyTool=新地图。MouseTool(地图)；
polyTool.polygon({
strokeColor: #1791fc ，
strokeOpacity: 1，
strokeWeight: 1，
fill color:“# 1791 fc”，
填充不透明度：0.4，
strokeStyle:“实心”，
外部数据：{
id:“123”
}
})
polyTool.on(draw ，(event)={
让=event.obj//After绘制多边形强度对象
Console.log(绘制图形顶点信息列表，poly.getoptions())
Console.log(绘制图形的自定义属性，poly.getoptions()。路径)
polyTool.close()
polyTool=null
})
},
完成了，伙计们！
总结
这就是这篇关于Vue访问高德地图的文章。关于Vue访问高德地图的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。