vue结合高德地图V2.0(JSAPI key搭配代理服务器并携带安全密钥转发)

Nginx服务器代理设置

server {listen       80;             #nginx端口设置，可按实际端口修改server_name  127.0.0.1;      #nginx server_name 对应进行配置，可按实际添加或修改# 自定义地图服务代理location /_AMapService/v4/map/styles {set $args "$args&jscode=您的安全密钥";proxy_pass https://webapi.amap.com/v4/map/styles;}# 海外地图服务代理location /_AMapService/v3/vectormap {set $args "$args&jscode=您的安全密钥";proxy_pass https://fmap01.amap.com/v3/vectormap;}# Web服务API 代理location /_AMapService/ {set $args "$args&jscode=您的安全密钥";proxy_pass https://restapi.amap.com/;}
}

main.js

window._AMapSecurityConfig = {//将http://1.1.1.1:80替换为实际代理地址serviceHost:'http://1.1.1.1:80/_AMapService',
}

index.vue

<template><div >  <el-input id="tipInput" v-model="inputSearchVal" placeholder="请输入搜索名称"></el-input><div id="container"></div></div>
</template><script>
import AMapLoader from '@amap/amap-jsapi-loader'
export default {name: 'mapSearch',data() {return{map:null,inputSearchVal: '',} },// 组件挂载完毕后发送请求mounted(){//DOM初始化完成进行地图初始化this.initMap();},methods:{initMap(){AMapLoader.load({key:"*********",// 申请好的Web端开发者Key，首次调用 load 时必填version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins:[],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等}).then((AMap)=>{// 存储AMapthis.map = new AMap.Map("container",{  //设置地图容器idviewMode:"3D",    //是否为3D地图模式zoom:18,           //初始化地图级别center:[121.444013,31.280784], //初始化地图中心点位置 });this.mapSearchInit()}).catch(e=>{console.log(e);})},mapSearchInit(){const self=thiswindow.AMap.plugin(['AMap.AutoComplete','AMap.PlaceSearch'],function(){var autoOptions = {// 城市，默认全国 city: "上海",// 使用联想输入的input的idinput: "tipInput"}var autocomplete= new AMap.AutoComplete(autoOptions)var placeSearch = new AMap.PlaceSearch({city:'上海',map:self.map})autocomplete.on('select', function(e){//TODO 针对选中的poi实现自己的功能placeSearch.search(e.poi.name)})})},},
};
</script><style>
#container {padding:0px;margin: 0px;width: 100%;height: 800px;
}
#tipInput{display: flex;align-items: center;width: 300px;height: 40px; box-sizing: border-box;z-index: 100;padding:0px;margin: 0px;
}
</style>

vue结合高德地图V2.0(JSAPI key搭配代理服务器并携带安全密钥转发)相关推荐

Vue对高德地图2.0的封装使用
在Vue项目里使用高德地图,网上有几个比较好用的,例如 AMap-Vue ,文档很好,但不开源 vue-amap ,文档让人流泪懒人和需求不复杂的,可以直接使用上面的.上面两开源的已经不太活跃了,用 ...
vue使用高德地图aMap实现轨迹动画查询显示
vue使用高德地图搜索地址添加标记marker,定位,拖拽选址功能https://blog.csdn.net/SmartJunTao/article/details/123955679 实现效果: 需 ...
vue使用高德地图-进行显示地图和查询天气
vue使用高德地图高德地图显示,实现了天气查询效果(Vue) 在index.html中引入高德地图的css和js vue 插件列表问题解决: 高德地图显示,实现了天气查询效果(Vue) 在ind ...
vue使用高德地图web端JS API（vue-amap插件）
高德地图地图 JS API v2.0:https://lbs.amap.com/api/jsapi-v2/summary/ vue-amap(基于Vue 2.0和高德地图的地图组件):https:// ...
vue人员轨迹_在vue中高德地图引入和轨迹的绘制的实现
高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图,并在main.js中进行全局配置.(百度上有高德地图引入与配置方法,这里就不详细介绍): 1)npm install vue-am ...
vue是否可以做行车轨迹_在vue中高德地图引入和轨迹的绘制的实现
高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图,并在main.js中进行全局配置.(百度上有高德地图引入与配置方法,这里就不详细介绍): 1)npm install vue-am ...
vue使用高德地图小demo（标记点，画线，3D，叠加图片图层）
vue使用高德地图小demo(标记点,画线,3D) 这个模式是3D的,可以看到地图是带有一定的倾角的. 注意:3D模式下,是不能够将进行画线的,不能使用PathSimplifier,改成2D可以正常使 ...
vue调用高德地图实现定位
vue调用高德地图实现定位第一步创建高德地图key 第二步:下载vue-amap npm install vue-amap --save 第三步:在项目main.js引入vue-amap impor ...
高德地图html js开发例子,vue.js高德地图实现热点图代码实例
1.在index.html引入高德地图JSAPI 2.地图dom 3.js实现 export default { data() {}, methods:{ initMap(){ let map = n ...
Vue使用高德地图api实现热力图动态缩放
Vue使用高德地图api实现热力图动态缩放前言 1.引入高德js 2.显示基本的热力图 3.显示优化 4.Vue页面完整代码前言项目需要,根据积水数据的多少,在页面中进行展示,选用高德热力图ap ...

vue结合高德地图V2.0(JSAPI key搭配代理服务器并携带安全密钥转发)

Nginx服务器代理设置

main.js

index.vue

vue结合高德地图V2.0(JSAPI key搭配代理服务器并携带安全密钥转发)相关推荐

最新文章

热门文章