VUE2.0 插入腾讯地图(有经纬度和搜索功能以及标记’)
在Vue 2.0中插入腾讯地图,并包含经纬度、搜索和标记功能,可以通过以下步骤实现:
- 在项目中安装腾讯地图JavaScript SDK。
npm install qqmap -S
- 在Vue组件中引入腾讯地图SDK。
<template>
<div id="map" style="width: 600px; height: 400px;"></div>
</template>
<script>
import { map } from 'qqmap'
export default {
name: 'TencentMap',
mounted() {
this.initMap();
},
methods: {
initMap() {
map.init({
key: '你的腾讯地图key', // 必填
// 初始化地图
success: () => {
let myLatlng = new qq.maps.LatLng(39.916527, 116.397128); // 默认经纬度
let myOptions = {
zoom: 12,
center: myLatlng
};
let map = new qq.maps.Map(document.getElementById("map"), myOptions);
// 搜索功能示例
let searchService = new qq.maps.SearchService({
map: map
});
let searchBtn = document.createElement('button');
searchBtn.innerText = '搜索';
searchBtn.onclick = () => {
let searchKey = '你要搜索的地点';
searchService.search(searchKey);
};
document.body.appendChild(searchBtn);
// 标记点示例
let marker = new qq.maps.Marker({
position: myLatlng,
map: map
});
}
});
}
}
}
</script>
- 在你的Vue项目的
index.html
或对应的页面中添加腾讯地图的<script>
标签。
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=你的腾讯地图key"></script>
确保替换你的腾讯地图key
为你从腾讯地图开放平台获取的API Key。
以上代码实现了在Vue组件中初始化腾讯地图,并在地图上设置了默认的经纬度。同时,添加了一个搜索按钮,点击后可以在地图上搜索指定的地点。最后,还添加了一个标记点,表示默认位置。
评论已关闭