Vuejs2 此处地图使用Vue时向地图添加信息气泡
正在尝试将信息气泡添加到我的heremap vue组件中的映射中（我还从和中获取了位） 我的组件上有几个方法（大部分是从here文档复制过来的） 但是，我无法在单击地图标记时显示信息气泡。this.ui在此事件侦听器的上下文中未定义。在事件侦听器之外，它不是未定义的。ui在已装入的组件事件中定义：Vuejs2 此处地图使用Vue时向地图添加信息气泡,vuejs2,here-api,Vuejs2,Here Api,正在尝试将信息气泡添加到我的heremap vue组件中的映射中（我还从和中获取了位） 我的组件上有几个方法（大部分是从here文档复制过来的） 但是，我无法在单击地图标记时显示信息气泡。this.ui在此事件侦听器的上下文中未定义。在事件侦听器之外，它不是未定义的。ui在已装入的组件事件中定义： mounted: function() { // Initialize the platform object: var pixelRatio =
mounted: function() {
// Initialize the platform object:
var pixelRatio = window.devicePixelRatio || 1;
let defaultLayers = this.platform.createDefaultLayers({
tileSize: pixelRatio === 1 ? 256 : 512,
ppi: pixelRatio === 1 ? undefined : 320
});
this.map = new H.Map(
this.$refs.map,
defaultLayers.normal.map,
{pixelRatio: pixelRatio, zoom: 5, center: { lat: 54.00366, lng: -2.547855} });
let behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map));
this.ui = H.ui.UI.createDefault(this.map, defaultLayers);
this.LoadMapLocations();
},
有人知道如何显示信息气泡吗？这些博客非常有用：
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1533195059" />
<script src="https://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-places.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
`<template>
<div class="here-map">
<div ref="map" v-bind:style="{ width: width, height: height }"></div>
</div>
</template>`
<script>
export default {
name: "HereMap",
data() {
return {
map: {},
platform: {},
router:{},
geocoder:{},
directions:[],
ui: null
}
},
props: {
appId: String,
appCode: String,
lat: String,
lng: String,
width: String,
height: String
},
created: function() {
this.platform = new H.service.Platform({
"app_id": this.appId,
"app_code": this.appCode,
'useHTTPS': true,
'useCIT': true
});
this.router = this.platform.getRoutingService();
this.geocoder = this.platform.getGeocodingService();
},
mounted: function() {
// Initialize the platform object:
var pixelRatio = window.devicePixelRatio || 1;
let defaultLayers = this.platform.createDefaultLayers({
tileSize: pixelRatio === 1 ? 256 : 512,
ppi: pixelRatio === 1 ? undefined : 320
});
this.map = new H.Map(
this.$refs.map,
defaultLayers.normal.map,
{pixelRatio: pixelRatio, zoom: 5, center: { lat: 54.00366, lng: -2.547855} });
let behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map));
this.ui = H.ui.UI.createDefault(this.map, defaultLayers);
this.LoadMapLocations();
},
methods:{
AddMarkerToGroup(group, location, icon) {
console.log(location);
var marker = new H.map.Marker({ lat: location.Latitude, lng: location.Longitude }, { icon: icon });
marker.setData(location.Data);
group.addObject(marker);
},
addMarkersToMap(locations,defaultIconUrl) {
var scale = window.devicePixelRatio;
var icon = new H.map.Icon(defaultIconUrl, { size: { w: 45 * scale, h: 50 * scale } });
var group = new H.map.Group();
this.map.addObject(group);
var self = this;
var position;
group.addEventListener('tap', function (evt) {
position = evt.target.getPosition();
// event target is the marker itself, group is a parent event target
// for all objects that it contains
var bubble = new H.ui.InfoBubble(evt.target.getPosition(), {
// read custom data
content: evt.target.getData()
});
// show info bubble
self.ui.addBubble(bubble);
}, false);
var addmarker = this.AddMarkerToGroup;
locations.forEach(function (location) {
addmarker(group, location, icon);
});
},
LoadMapLocations(){
let locations = [
{ Name: "Wolverhampton" , Latitude:52.5914143, Longitude: -2.1496674, Data: "wolverhampton meeting" },
{ Name: "London" , Latitude:51.5048147, Longitude: -0.121162, Data: "london meeting" },
{ Name: "Manchester" , Latitude:53.4757539, Longitude: -2.2791187, Data: "manchester meeting" }
];
this.addMarkersToMap(locations,"https://image.flaticon.com/icons/png/512/33/33622.png");
},
ZoomToLocation(lat,long,zoom){
console.log("zoom to location ");
this.map.setCenter({ lat: lat, lng: long });
this.map.setZoom(zoom);
}
}
};
`
`
导出默认值{
名称：“HereMap”，
数据（）{
返回{
映射：{}，
平台：{}，
路由器：{}，
地理编码员：{}，
方向：[]，
ui:null
}
},
道具：{
appId:String，
appCode:String，
拉特：弦，
液化天然气：字符串，
宽度：字符串，
高度：字符串
},
已创建：函数（）{
this.platform=新的H.service.platform({
“app_id”：this.appId，
“应用程序代码”：this.appCode，
“useHTTPS”：对，
“useCIT”：true
});
this.router=this.platform.getRoutingService（）；
this.geocoder=this.platform.getGeocodingService（）；
},
挂载：函数（）{
//初始化平台对象：
var pixelRatio=window.devicePixelRatio | | 1；
让defaultLayers=this.platform.createDefaultLayers({
tileSize:pixelRatio==1？256:512，
ppi:pixelRatio==1？未定义：320
});
this.map=新的H.map(
此.$refs.map，
defaultLayers.normal.map，
{pixelRatio:pixelRatio，缩放：5，中心：{lat:54.00366，lng:-2.547855}）；
让行为=新的H.mapevents.behavior（新的H.mapevents.mapevents（this.map））；
this.ui=H.ui.ui.createDefault（this.map，defaultLayers）；
这是LoadMapLocations（）；
},
方法：{
AddMarkerToGroup（组、位置、图标）{
控制台日志（位置）；
var marker=newh.map.marker（{lat:location.Latitude，lng:location.Longitude}，{icon:icon}）；
marker.setData（location.Data）；
添加对象（标记）；
},
addMarkersToMap（位置，默认图标）{
var scale=window.devicePixelRatio；
var icon=newh.map.icon（defaulticonur，{size:{w:45*scale，H:50*scale}）；
var group=new H.map.group（）；
this.map.addObject（组）；
var self=这个；
var位置；
group.addEventListener（'tap'，函数（evt）{
position=evt.target.getPosition（）；
//事件目标是标记本身，组是父事件目标
//对于它包含的所有对象
var bubble=new H.ui.InfoBubble（evt.target.getPosition（）{
//读取自定义数据
内容：evt.target.getData（）
});
//显示信息气泡
self.ui.addBubble（bubble）；
}，假）；
var addmarker=this.AddMarkerToGroup；
位置。forEach（函数（位置）{
addmarker（组、位置、图标）；
});
},
LoadMapLocations（）{
让位置=[
{名称：“沃尔弗汉普顿”，纬度：52.5914143，经度：-2.1496674，数据：“沃尔弗汉普顿会议”}，
{名称：“伦敦”，纬度：51.5048147，经度：-0.121162，数据：“伦敦会议”}，
{名称：“曼彻斯特”，纬度：53.4757539，经度：-2.2791187，数据：“曼彻斯特会议”}
];
此.addMarkersToMap（位置）https://image.flaticon.com/icons/png/512/33/33622.png");
},
缩放颜色（横向、纵向、缩放）{
console.log（“缩放到位置”）；
this.map.setCenter（{lat:lat，lng:long}）；
this.map.setZoom（缩放）；
}
}
};
我尝试在事件侦听器外部创建对此的引用，然后在内部使用此引用，但控制台上没有出现错误-很好，但信息标记仍然没有出现。您是否声明了类似以下数据的ui:（）=>（{ui:null}）？如果是，那么请分享你的整个js代码，这样我们可以更好地帮助你。-javascript部分包含my HereMap.vue组件的整个javascript。太大，无法在评论中发布--我用于调试的处于警戒状态Thanks@HEREDeveloperSupport有没有计划为这里的地图创建一个vue npm库？嘿@JimmyShoe，你看过我的包含vue的InfoBubbles的教程吗？
`<template>
<div class="here-map">
<div ref="map" v-bind:style="{ width: width, height: height }"></div>
</div>
</template>`
<script>
export default {
name: "HereMap",
data() {
return {
map: {},
platform: {},
router:{},
geocoder:{},
directions:[],
ui: null
}
},
props: {
appId: String,
appCode: String,
lat: String,
lng: String,
width: String,
height: String
},
created: function() {
this.platform = new H.service.Platform({
"app_id": this.appId,
"app_code": this.appCode,
'useHTTPS': true,
'useCIT': true
});
this.router = this.platform.getRoutingService();
this.geocoder = this.platform.getGeocodingService();
},
mounted: function() {
// Initialize the platform object:
var pixelRatio = window.devicePixelRatio || 1;
let defaultLayers = this.platform.createDefaultLayers({
tileSize: pixelRatio === 1 ? 256 : 512,
ppi: pixelRatio === 1 ? undefined : 320
});
this.map = new H.Map(
this.$refs.map,
defaultLayers.normal.map,
{pixelRatio: pixelRatio, zoom: 5, center: { lat: 54.00366, lng: -2.547855} });
let behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map));
this.ui = H.ui.UI.createDefault(this.map, defaultLayers);
this.LoadMapLocations();
},
methods:{
AddMarkerToGroup(group, location, icon) {
console.log(location);
var marker = new H.map.Marker({ lat: location.Latitude, lng: location.Longitude }, { icon: icon });
marker.setData(location.Data);
group.addObject(marker);
},
addMarkersToMap(locations,defaultIconUrl) {
var scale = window.devicePixelRatio;
var icon = new H.map.Icon(defaultIconUrl, { size: { w: 45 * scale, h: 50 * scale } });
var group = new H.map.Group();
this.map.addObject(group);
var self = this;
var position;
group.addEventListener('tap', function (evt) {
position = evt.target.getPosition();
// event target is the marker itself, group is a parent event target
// for all objects that it contains
var bubble = new H.ui.InfoBubble(evt.target.getPosition(), {
// read custom data
content: evt.target.getData()
});
// show info bubble
self.ui.addBubble(bubble);
}, false);
var addmarker = this.AddMarkerToGroup;
locations.forEach(function (location) {
addmarker(group, location, icon);
});
},
LoadMapLocations(){
let locations = [
{ Name: "Wolverhampton" , Latitude:52.5914143, Longitude: -2.1496674, Data: "wolverhampton meeting" },
{ Name: "London" , Latitude:51.5048147, Longitude: -0.121162, Data: "london meeting" },
{ Name: "Manchester" , Latitude:53.4757539, Longitude: -2.2791187, Data: "manchester meeting" }
];
this.addMarkersToMap(locations,"https://image.flaticon.com/icons/png/512/33/33622.png");
},
ZoomToLocation(lat,long,zoom){
console.log("zoom to location ");
this.map.setCenter({ lat: lat, lng: long });
this.map.setZoom(zoom);
}
}
};