Question

我正在使用带有jQuery的Google Map API制作一个非常简单的地图。我把标记放入了，但它根本没有显示出来。很困惑！

$(document).ready(function(){
	
	var image = 'www.franhaines.co.uk/thebellinn/wp-content/themes/starkers-master/images/marker.png';
	
	var marker = new google.maps.Marker({
		position: myLatLng,
		title: "We are here",
		map: map,
        icon: image
    });
	
	var myLatLng = 
		new google.maps.LatLng(52.780761, -2.199389);
		
	var mapOptions = {
		zoom: 12,
		center: myLatLng
		};
		
	var map = new google.maps.Map($('#mapCanvas').get(0), mapOptions);
	});

Answer 1

您的标记的网址不正确，应该是（使用正确的协议）：

'http://www.franhaines.co.uk/thebellinn/wp-content/themes/starkers-master/images/marker.png';

在初始化地图之前，您正在创建标记（使用map属性）。工作代码段：

$(document).ready(function () {

    var image = 'http://www.franhaines.co.uk/thebellinn/wp-content/themes/starkers-master/images/marker.png';

    var myLatLng = new google.maps.LatLng(52.780761, -2.199389);

    var mapOptions = {
        zoom: 12,
        center: myLatLng
    };

    var map = new google.maps.Map($('#mapCanvas').get(0), mapOptions);

    var marker = new google.maps.Marker({
        position: myLatLng,
        title: "We are here",
        map: map,
        icon: image
    });

});

html, body, #mapCanvas {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="mapCanvas" style="border: 2px solid #3872ac;"></div>

谷歌地图jQuery标记不显示

1 个答案: