代码拉取完成,页面将自动刷新
同步操作将从 lyflyy/腾讯地图vue 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
地图点击获取位置经纬度,输入位置进行匹配跳转
1. index.html中引入
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=ZWZBZ-Q7LWF-OM3JC-JFSUO-HW7MJ-FKFLH"></script>
key 需要自己申请
2. 由于是外部库,需要在vue.config.js中配置externals引入
configureWebpack: config => {
config.externals = {
qq: 'qq',
TMap: 'TMap',
}
},
此次是vue-cli4生成的项目,其他版本或者有webpack文件的自行搜索
3. 引入一个axios,请求服务器端接口
<template>
<div>
<input v-model="key" type="text" />
<button @click="search">search</button>
<div>
经度 - {{ longitude }}
纬度 - {{ latitude }}
</div>
<div id="container" style="width:600px;height:500px;"></div>
</div>
</template>
<script type="model">
import qq from 'qq'
export default {
mounted() {
console.log()
this.init();
},
data() {
return {
map: {},
key: '',
longitude:39.916527,//经度
latitude:116.397128//纬度
}
},
methods:{
search(){
this.$axios({
method:"get",
// 该url为服务器端地址
url:"http://localhost:9527/map",
dataType: "jsonp",
params:{
name: this.key,
},
}).then((ok)=>{
console.log(ok.data.result.location)
this.latitude = ok.data.result.location.lat
this.longitude = ok.data.result.location.lng
let lat = new qq.maps.LatLng(this.latitude, this.longitude)
this.map.panTo(lat)
},(err)=>{
console.log(err)
})
},
init() {
let that = this
//步骤:定义map变量 调用 qq.maps.Map() 构造函数 获取地图显示容器
//设置地图中心点
var myLatlng = new qq.maps.LatLng(this.longitude,this.latitude);
//定义工厂模式函数
var myOptions = {
zoom: 8, //设置地图缩放级别
center: myLatlng, //设置中心点样式
mapTypeId: qq.maps.MapTypeId.ROADMAP //设置地图样式详情参见MapType
}
//获取dom元素添加地图信息
this.map = new qq.maps.Map(document.getElementById("container"), myOptions);
//给地图添加点击事件
//并获取鼠标点击的经纬度
qq.maps.event.addListener(this.map, 'click', function(event) {
that.changeLat(event.latLng.getLat())
that.changeLon(event.latLng.getLng())
});
},
changeLon(e){
this.longitude = e
},
changeLat(e){
this.latitude = e
},
}
}
</script>
<style>
</style>
import org.springframework.http.HttpEntity;
import org.springframework.http.HttpHeaders;
import org.springframework.http.ResponseEntity;
import org.springframework.util.LinkedMultiValueMap;
import org.springframework.util.MultiValueMap;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.client.RestTemplate;
/**
* @Description: 腾讯地图api
* @author: LiYang
* @Email: lyflyyvip@163.com
* @create: 2020-05-11 10:20
**/
@RestController
@RequestMapping("/map")
public class MapController {
private RestTemplate restTemplate = new RestTemplate();
@RequestMapping("")
@CrossOrigin(origins = "*")
public String restTemplateDemo(@RequestParam String name){
try {
//跨域访问表头
HttpHeaders headers = new HttpHeaders();
//接口地址
String url = "https://apis.map.qq.com/ws/geocoder/v1?address=" + name + "&key=ZWZBZ-Q7LWF-OM3JC-JFSUO-HW7MJ-FKFLH";
//restTemplate的POST请求,必须是使用MultiValueMap
MultiValueMap<String, String> multiValueMap = new LinkedMultiValueMap<>();
//利用multiValueMap插入需要传输的数据
// multiValueMap.add("id","1");
// multiValueMap.add("name","小明");
//放入Http传输的数据
HttpEntity<MultiValueMap<String, String>> httpEntity = new HttpEntity<>(multiValueMap,headers);
//访问接口并获取返回值
ResponseEntity<String> responseEntity = restTemplate.getForEntity(url,String.class);
//输出接口所返回过来的值
return responseEntity.getBody();
}catch(Exception e){
e.printStackTrace();
}finally {
}
return null;
}
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。