添加自定义标记到谷歌街景
Adding a custom marker to google street view
请帮我添加一个标记到谷歌街景,但当我把它没有工作,我得到一个未捕获的ReferenceError: map未定义
这里是标记变量
var cafe = new google.maps.LatLng(34.935196, -107.539546);
下面是设置标记
的代码var cafeMarker = new google.maps.Marker({
position: cafe,
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00',
title: 'Cafe'
});
这是自定义的谷歌街景
<script src="https://maps.googleapis.com/maps/api/js? v=3.exp&signed_in=true"></script>
<script>
function initialize() {
var fenway = new google.maps.LatLng(34.938447, -107.535998);
var panoOptions = {
position: fenway,
addressControlOptions: {
position: google.maps.ControlPosition.BOTTOM_CENTER
},
linksControl: false,
panControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
enableCloseButton: false
};
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('map-canvas'), panoOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
-
要在街景视图上看到标记,必须将其添加到全景图中。
Uncaught ReferenceError: map is not defined
告诉你,在你的代码中没有定义map
变量,它需要是panorama
。var cafeMarker = new google.maps.Marker({ position: cafe, map: panorama, // your code doesn't have a 'map' variable icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00', title: 'Cafe' });
-
一旦我这样做,你的标记太远了,看不到。如果我将pano位置移近(并指向标记),我就能看到它。
function initialize() { var fenway = new google.maps.LatLng(34.9355,-107.539254); var panoOptions = { position: fenway, addressControlOptions: { position: google.maps.ControlPosition.BOTTOM_CENTER }, linksControl: false, panControl: false, zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL }, enableCloseButton: false }; var panorama = new google.maps.StreetViewPanorama( document.getElementById('map-canvas'), panoOptions); var cafe = new google.maps.LatLng(34.935196, -107.539546); var cafeMarker = new google.maps.Marker({ position: cafe, map: panorama, icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00', title: 'Cafe' }); var heading = google.maps.geometry.spherical.computeHeading(panorama.getPosition(),cafe); panorama.setPov({ heading: heading, pitch: 0, zoom: 1 }); }
概念验证
代码片段:
function initialize() {
var fenway = new google.maps.LatLng(34.9355, -107.539254);
// var fenway = new google.maps.LatLng(34.938447, -107.535998);
var panoOptions = {
position: fenway,
addressControlOptions: {
position: google.maps.ControlPosition.BOTTOM_CENTER
},
linksControl: false,
panControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
enableCloseButton: false
};
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('map-canvas'), panoOptions);
var cafe = new google.maps.LatLng(34.935196, -107.539546);
var cafeMarker = new google.maps.Marker({
position: cafe,
map: panorama,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00',
title: 'Cafe'
});
var heading = google.maps.geometry.spherical.computeHeading(panorama.getPosition(), cafe);
panorama.setPov({
heading: heading,
pitch: 0,
zoom: 1
});
// Set up the map
var myOptions = {
zoom: 15,
center: cafe
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
var cafeMarkerMap = new google.maps.Marker({
position: cafe,
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00',
title: 'Cafe'
});
var panoMarker = new google.maps.Marker({
position: panorama.getPosition(),
map: map,
icon: {
url: 'https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png',
size: new google.maps.Size(7, 7),
anchor: new google.maps.Point(3.5, 3.5)
},
title: 'Pano'
});
document.getElementById('info').innerHTML = google.maps.geometry.spherical.computeDistanceBetween(panorama.getPosition(), cafe).toFixed(2) + " meters";
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas,
#map_canvas {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>
<div id="info"></div>
相关文章:
- 谷歌地图自定义标记问题
- 谷歌日历自定义按钮
- 从谷歌地图自定义控件打开离子模态时遇到问题
- 柱形图中每列的 ng-谷歌图表自定义颜色
- 谷歌地图自定义引脚
- 谷歌地图自定义路线和高程使用我自己的点
- 如何将数组作为谷歌分析自定义维度发送
- 谷歌分析-自定义维度为JS变种
- 谷歌地图自定义按钮与标准风格
- 谷歌地图自定义标记
- 谷歌分析自定义变量使用情况
- 谷歌地图自定义路线到安卓导航
- 带有复选框的谷歌地图自定义下拉菜单
- 我的谷歌地图自定义标记不会显示在我的WordPress网站中
- 谷歌地图自定义标记链接不起作用
- 谷歌地图自定义指针不起作用
- 谷歌分析自定义链接归因
- 使用缩放更改谷歌地图自定义图标
- 如何使用谷歌浏览器自定义搜索引擎进行多参数查询
- 谷歌地图自定义磁贴设置和不显示图像