前端调用高德地图百度地图

这边是vue得
先在public下得index.html加上请求得js

根据搜索模糊查询，然后自己点击获取精确经纬度。

高德<script type="text/javascript"src="https://webapi.amap.com/maps?v=1.4.15&key=95ed02329c3cf68ae02a62f71a00f899&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
百度<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=CGL14hd5gjSHKurPltP5kQQI7hqskiWK"></script><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=uvN6vatvU44OQ0a9yuXdQZxTXODHGuLI"></script>
百度1.3得版本不需要密钥<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />

<el-form-item label="地图" prop="property" required><div class="form-group"><div class="row"><div class="col-sm-6"><div class="form-group"><label class="col-sm-4 control-label is-required">地址:</label><div class="col-sm-8"><input class="form-control"  type="text" v-model="form.locationName" name="meetingPlace" @keyup.enter="onSubmit"  id="deptTxdz" required :disabled="disabled2"></div></div></div><div class="col-sm-6">请在下面地图上点击详细地址 获取经度纬度</div></div><div class="row"><div class="col-sm-6"><div class="form-group"><label class="col-sm-4 control-label is-required">地址的经度:</label><div class="col-sm-8"><input class="form-control" type="text"  v-model="form.info1" name="Longitude"  id="deptLongitude" readonly="true" required></div></div></div><div class="col-sm-6"><div class="form-group"><label class="col-sm-4 control-label is-required">地址的纬度:</label><div class="col-sm-8"><input class="form-control" type="text"  v-model="form.info2" name="Latitude"  id="deptLatitude"  readonly="true" required :disabled="disabled2"></div></div></div></div></div><h4 class="form-header h4">地图定位:</h4><div id="container" class="map" style="height:500px"></div><div class="input-card" style="visibility:hidden" ><h4>左击获取经纬度：</h4><div class="input-item"><input type="text" readonly="true" id="lnglat" :disabled="disabled2"></div></div></el-form-item>

前端页面是一样的

//高德得调用：
//地图加载let that =this;that.map = new AMap.Map("container", {resizeEnable: true});AMap.plugin('AMap.ToolBar', () => {let toolbar = new AMap.ToolBar()that.map.addControl(toolbar)})if(location.href.indexOf('&guide=1')!==-1){that.map.setStatus({scrollWheel:false})}AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'],function(){输入提示var autoOptions = {input: "deptTxdz"};var auto = new AMap.Autocomplete(autoOptions);var placeSearch = new AMap.PlaceSearch({map: that.map});  构造地点查询类AMap.event.addListener(auto, 'select', function(e) {debuggerplaceSearch.setCity(e.poi.adcode);placeSearch.search(e.poi.name);  关键字查询查询})})为地图注册click事件获取鼠标点击出的经纬度坐标that.map.on('click', function(e) {debuggerdocument.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()document.getElementById("deptLongitude").value = e.lnglat.getLng()document.getElementById("deptLatitude").value = e.lnglat.getLat()});

// 百度地图API功能var map = new BMap.Map("container");var point = new BMap.Point(this.long,this.lats);map.centerAndZoom(point,12);map.enableScrollWheelZoom();this.local = new BMap.LocalSearch(map,{renderOptions:{map:map,autoViewport:true}});//单击获取点击的经纬度map.addEventListener("click",function(e){document.getElementById("deptLongitude").value = e.point.lngdocument.getElementById("deptLatitude").value = e.point.latvar marker = new BMap.Marker(e.point);map.addOverlay(marker);});//定位当前位置var geolocation = new BMap.Geolocation();geolocation.getCurrentPosition(function(r){if(this.getStatus() == BMAP_STATUS_SUCCESS){var mk = new BMap.Marker(r.point);map.addOverlay(mk);map.panTo(r.point);this.long = r.point.lngthis.lats = r.point.lat}else {alert('failed'+this.getStatus());}        },{enableHighAccuracy: true})},

前端调用高德地图百度地图相关推荐

前端调用高德地图app、百度地图app
前端调用高德地图app.百度地图app 说明:这里只说明了前端如何调用app地图,没有代码,测试机上高德地图.百度地图.腾讯地图,都已经安装好了,如果没有安装,调起app地图会没有反应,至于如何验证手 ...
vue项目H5调起高德或百度地图手机应用，或调起高德百度网页版实现导航功能（已实现）
需求说明:H5实现唤起高德和百度地图导航到目标景点的功能分析:用户通过点击选择使用百度还是高德地图,点击后调用guide方法,判断设备上是否有高德或者百度APP,有就直接调用APP,如果没有就调用网 ...
WEB页面或者H5页面如何打开高德或者百度地图APP导航（实战向）
一.序言在日常开发中,地图的接入使用在各大app和网站中我们都不难见到,打开方式也各有不同,嵌套内部的,或者是直接打开百度,高德,谷歌等地图app.相对来说,各大地图app的文档写的非常齐全,即使是 ...
Android实现高德地图上拉,ScrollLayout：上拉滑动上滑拖出，类似高德地图百度地图抽屉拖拽效果...
摘要在ScrollView或者ListView里面使用ViewPager.支持手势上拉滑出,中途停顿,下滑退出页面,类似高德地图百度地图内场景抽屉拖拽效果效果 Gif动画类似使用 Demo 下载A ...
H5页面唤醒高德地图|百度地图App
H5页面唤醒高德地图|百度地图App 移动端H5页面唤醒app,若唤醒失败则跳转到应用商城下载. 唤醒前需要检测当前操作系统,不同的操作系统用不同的协议我这里的需求是唤醒失败就跳转到网页版的地图,若 ...
Flutter对接第三方高德地图+百度地图基础定位实现
Flutter对接第三方高德地图+百度地图基础定位实现原创:@As.Kai 博客地址:https://blog.csdn.net/qq_42362997 如果以下内容对您有帮助,点赞点赞点赞~ 高德 ...
地图导航业下半场，高德与百度地图各缺一子？
百度地图和高德地图的份额之争一直没有平息,二者的用户量高低在业内一直是个谜. 有说高德超过百度的:在2017年8月,国内第三方数据研究机构Talking Data移动观象台发布的月度APP覆盖率排行榜 ...
5张对比图告诉你,天地图,高德地图,百度地图,谷歌地图区别
先来看看传说中最争议的天地图吧. 最大放大距离,每厘米25米. 我们用这个体育场和下面的大厦做对比..其实还有大厦下的车..(这张图上的车看不清,真有,没骗你们....) 再上一张高德的, 最大50M ...
Android调用跳转百度地图、高德地图、腾讯地图进行目的地导航
Android App跳转百度地图.高德地图.腾讯地图进行目的地导航. 先放上百度.高德.腾讯地图调起API文档地址,有些参数不懂可以参考. 百度地图:http://lbsyun.baidu.com/ ...

前端调用高德地图百度地图

前端调用高德地图百度地图相关推荐

最新文章

热门文章

前端调用高德地图 百度地图

前端调用高德地图 百度地图相关推荐

最新文章

热门文章

前端调用高德地图百度地图

前端调用高德地图百度地图相关推荐