自定义标记未显示在Google地图上
[英]Custom marker not showing up on Google Maps
问题描述
我正在尝试用我正在使用的图标替换Google的默认图标。 但是，默认标记仍在地图上显示。 作为JavaScript新手，我的技能仍然很狡猾。 任何人都可以检查我的代码，看看出了什么问题吗？ 谢谢。
var hq_icon = "C:\Users\User.CARRIESHIH-PC\Desktop\Map_dev\hq.png";
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var HQMarker = new google.maps.Marker({
position: FirsteamHQ,
map: map,
icon: hq_icon
});
HQMarker.setMap(map);
3 个解决方案
解决方案1
1 2015-08-17 08:55:12
您不能从绝对路径加载本地文件。 通过HTTP（S）服务文件或使用相对路径。
[编辑]
一个完整的例子：
<!DOCTYPE html>
<html lang = "en">
<head>
<style type="text/css">
html{height: 100%}
body{height: 100%; margin: 0; padding: 0}
#map-canvas{height: 100%}
</style>
<title>GMaps Demo</title>
<script src = "https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize(){
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var hq_icon = "http://i.imgur.com/Na6VUFY.png";
var HQMarker = new google.maps.Marker({
position: new google.maps.LatLng(-34.397, 150.644),
map: map,
icon: hq_icon
});
HQMarker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id = "map-canvas">
</div>
</body>
</html>
解决方案2
0 2015-08-17 13:38:50
您需要为脚本提供图标文件的相对路径 ：
var hq_icon = "relative/path/to/hq.png";
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var HQMarker = new google.maps.Marker({
position: FirsteamHQ,
map: map,
icon: hq_icon
});
HQMarker.setMap(map);
因此，例如，如果您的上述脚本位于map.js的以下结构中，而hq.png图像位于images/markers
Project
|
|-- map.js
|
+-- images
|
+-- markers
|
|-- hq.png
那么相对路径将是images/markers/hq.png
解决方案3
-1 2015-08-17 08:17:09
我认为您缺少坐标（位置）。 那应该是这样的
position: new google.maps.LatLng(lat, lng)
Google地图标记未显示
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.