Fatal编程技术网
  • javascript/
  • Javascript 谷歌地图API v3-自定义标记未出现

Javascript 谷歌地图API v3-自定义标记未出现

javascript google-maps

Javascript 谷歌地图API v3-自定义标记未出现,javascript,google-maps,Javascript,Google Maps,我相信这是一个简单的解决方案，但我一直在到处搜索，我尝试的一切都不起作用。我所要做的就是用自定义图标替换默认标记，但它不会显示。这是我的密码： <script type="text/javascript"> function initialize() { var myLatlng = new google.maps.LatLng(43.041936,-88.044523); var mapOptions = { center:myLatlng, zoom:15,

我相信这是一个简单的解决方案，但我一直在到处搜索，我尝试的一切都不起作用。我所要做的就是用自定义图标替换默认标记，但它不会显示。这是我的密码：

<script type="text/javascript">

function initialize() {
var myLatlng = new google.maps.LatLng(43.041936,-88.044523);
var mapOptions = {
    center:myLatlng,
    zoom:15,
    disableDefaultUI:true,
    mapTypeId:google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("milwaukeeMap"), mapOptions);

var marker = new google.maps.Marker();
    marker.setPosition(myLatlng);
    marker.setMap(map);
    marker.setIcon('/images/map-marker.png');
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>


函数初始化（）{
var mylatng=new google.maps.LatLng（43.041936，-88.044523）；
变量映射选项={
中心：myLatlng，
缩放：15，
disableDefaultUI:true，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（document.getElementById（“密尔沃基地图”）、mapOptions；
var marker=new google.maps.marker（）；
标记器设置位置（myLatlng）；
marker.setMap（map）；
setIcon（'/images/map marker.png'）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
我知道图像在正确的位置；如果我键入路径，我可以在浏览器中找到它。我已经检查了一遍又一遍，但是我的代码有问题吗？很抱歉，我不能提供一个实例。

我创建了一个小测试文件，您的javascript代码似乎没有任何问题。我能很好地看到我自己的记号笔。因此，您的HTML文件的其余部分似乎有问题。PNG文件是否存在？它真的是PNG吗？也许可以尝试不同的图像来确定

Ron.

我创建了一个小测试文件，您的javascript代码似乎没有任何问题。我能很好地看到我自己的记号笔。因此，您的HTML文件的其余部分似乎有问题。PNG文件是否存在？它真的是PNG吗？也许可以尝试不同的图像来确定

罗恩。


函数初始化（）{
var mylatng=new google.maps.LatLng（43.041936，-88.044523）；
变量映射选项={
中心：myLatlng，
缩放：15，
disableDefaultUI:true，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（document.getElementById（“密尔沃基地图”）、mapOptions；
var markerImage='images/map marker.png'；
var marker=new google.maps.marker({
职位：myLatlng，
地图：地图，
图标：markerImage
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
试试这个，我改变了如何创建标记

我更改了图像url以测试其工作情况：

<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">

function initialize() {
var myLatlng = new google.maps.LatLng(43.041936,-88.044523);
var mapOptions = {
        center:myLatlng,
        zoom:15,
        disableDefaultUI:true,
        mapTypeId:google.maps.MapTypeId.ROADMAP
        }
var map = new google.maps.Map(document.getElementById("milwaukeeMap"), mapOptions);

var markerImage = 'http://www.mapsmarker.com/wp-content/uploads/leaflet-maps-marker-icons/bar_coktail.png';

var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        icon: markerImage
        });
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="milwaukeeMap" style="height:400px;width:400px;"></div>
</body>
</html>


函数初始化（）{
var mylatng=new google.maps.LatLng（43.041936，-88.044523）；
变量映射选项={
中心：myLatlng，
缩放：15，
disableDefaultUI:true，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（document.getElementById（“密尔沃基地图”）、mapOptions；
var markerImage='1〕http://www.mapsmarker.com/wp-content/uploads/leaflet-maps-marker-icons/bar_coktail.png';
var marker=new google.maps.marker({
职位：myLatlng，
地图：地图，
图标：markerImage
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
JSFIDLE上的代码

函数初始化（）{ var mylatng=new google.maps.LatLng（43.041936，-88.044523）； 变量映射选项={ 中心：myLatlng， 缩放：15， disableDefaultUI:true， mapTypeId:google.maps.mapTypeId.ROADMAP } var map=new google.maps.map（document.getElementById（“密尔沃基地图”）、mapOptions； var markerImage='images/map marker.png'； var marker=new google.maps.marker({ 职位：myLatlng， 地图：地图， 图标：markerImage }); } google.maps.event.addDomListener（窗口“加载”，初始化）； 试试这个，我改变了如何创建标记

我更改了图像url以测试其工作情况：

<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">

function initialize() {
var myLatlng = new google.maps.LatLng(43.041936,-88.044523);
var mapOptions = {
        center:myLatlng,
        zoom:15,
        disableDefaultUI:true,
        mapTypeId:google.maps.MapTypeId.ROADMAP
        }
var map = new google.maps.Map(document.getElementById("milwaukeeMap"), mapOptions);

var markerImage = 'http://www.mapsmarker.com/wp-content/uploads/leaflet-maps-marker-icons/bar_coktail.png';

var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        icon: markerImage
        });
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="milwaukeeMap" style="height:400px;width:400px;"></div>
</body>
</html>


函数初始化（）{
var mylatng=new google.maps.LatLng（43.041936，-88.044523）；
变量映射选项={
中心：myLatlng，
缩放：15，
disableDefaultUI:true，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（document.getElementById（“密尔沃基地图”）、mapOptions；
var markerImage='1〕http://www.mapsmarker.com/wp-content/uploads/leaflet-maps-marker-icons/bar_coktail.png';
var marker=new google.maps.marker({
职位：myLatlng，
地图：地图，
图标：markerImage
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
我发现在某些情况下，外部托管的图标需要一个额外的参数，例如

images/map-marker.png?raw=true
我发现在某些情况下，外部托管图标需要一个额外的参数，例如

images/map-marker.png?raw=true
我在Ubuntu上使用Firefox 57.0.4，然后我切换到Chromium版本63.0.3239.84，它成功了。这就是我的想法

?raw=true
打开和关闭。

我在Ubuntu上使用Firefox 57.0.4，然后我切换到Chromium版本63.0.3239.84，它成功了。这就是我的想法

?raw=true
打开和关闭。

发布的代码没有问题（假设您指示的标记URL是正确的）。发布的代码没有问题（假设您指示的标记URL是正确的）。感谢您的输入；我不确定我的照片是怎么处理的，但我只是移动了位置，现在它工作了。你把它移到哪里了？我也有同样的问题。谢谢你的意见；我不确定我的照片是怎么处理的，但我只是移动了位置，现在它工作了。你把它移到哪里了？我也有同样的问题。