【问题标题】:Google Maps: Clickable Custom Marker谷歌地图:可点击的自定义标记
【发布时间】:2016-01-04 23:27:23
【问题描述】:

在循环中创建许多自定义标记后,我似乎找不到能够链接到外部网站的解决方案,而每个标记都有一个唯一的链接。

我尝试了此代码的许多变体,但似乎一直遇到未定义的变量(下面的代码演示了未定义的 map_markers 变量)

        <script src="https://maps.googleapis.com/maps/api/js"></script>
	    <script type="text/javascript">
	    	var map;

            // generated by PHP, but output looks like this...
	    	var map_markers = [[43.536396, -110.740956, "T1", "/test-url"],[43.812092, -111.097181, "T2", "/test-url2"],[43.53640889360323, -110.74090051257326, "T3", "/test-url3"],[43.463373, -110.762519, "T4", "/test-url4"]];

			google.maps.event.addDomListener(window, 'load', function() {
				var mapCanvas = document.getElementById('map');
    			map = new google.maps.Map(mapCanvas, {
					center: new google.maps.LatLng(37.8846194, -95.660041),
					zoom: 4,
					mapTypeId: google.maps.MapTypeId.ROADMAP
    			});

    			for (var i = 0; i < map_markers.length; i++) {
					var marker = new google.maps.Marker({
						position: {'lat': map_markers[i][0], 'lng': map_markers[i][1]},
						map: map,
						title: map_markers[i][2]
					});
		            google.maps.event.addListener(marker, 'click', (function(markers, index) {
				        return function() {
				            window.open("http://www.example.com/" . markers[index][3], '_blank');
				        }
				    })(map_markers, i));
				}

			});
		</script>

注意:上面的代码使用了一个附件,但我尝试了很多变体,比如向标记添加“url”参数(但这会导致 url 属性未定义?),我试过 this.url 时也有那个属性,但没有运气......

以上代码在单击标记时会生成此错误: 未捕获的类型错误:无法读取未定义的属性“135”,其中 135 是单击的标记的索引号

我已经搜索了网络,但似乎没有解决方案可以解决我的问题。也许我错过了一些简单的东西,但这让我很难过[?]

PS:地图和标记生成完美,只是在单击我遇到问题的标记时出现 JS 错误!

TIA!

【问题讨论】:

    标签: javascript google-maps google-maps-api-3


    【解决方案1】:

    看起来像

    window.open("http://www.example.com/" . markers[index][3], '_blank');
    

    应该是

    window.open("http://www.example.com/" + map_markers[index][3], '_blank');

    【讨论】:

    • 卫生部。我觉得好傻。知道这将是我错过的东西。这就是我混合 PHP 和 JS 而对语法没有给予足够重视的结果。谢谢!
    • 当然,很高兴我们知道了!不知道这是否是一种选择,但是制作 JSON 对象数组而不是数组数组会使 JS 代码更易于理解和调试。因此,不是 map_markers[index][3] 而是类似于 map_markers[index].URL 或 map_markers[index].Longitude
    猜你喜欢
    • 2020-01-22
    • 2017-09-04
    • 2015-12-04
    • 2012-09-27
    • 2013-08-21
    • 1970-01-01
    • 2023-03-21
    相关资源
    最近更新 更多