gpt4 book ai didi

javascript - Google Maps API v3 主动标记 onClick

转载 作者:行者123 更新时间:2023-11-29 18:26:20 25 4
gpt4 key购买 nike

我有一个用于 Google map 上标记的 addListener 点击方法(在 setMarkers 函数中):

var infowindow = null;

$(document).ready(function () { initialize(); });

function initialize() {

var centerMap = new google.maps.LatLng(39.828175, -98.5795);

var myOptions = {
zoom: 4,
center: centerMap,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

setMarkers(map, sites);
infowindow = new google.maps.InfoWindow({
content: "loading..."
});

var bikeLayer = new google.maps.BicyclingLayer();
bikeLayer.setMap(map);
}

var sites = [
['Mount Evans', 39.58108, -105.63535, 4, 'This is Mount Evans.'],
['Irving Homestead', 40.315939, -105.440630, 2, 'This is the Irving Homestead.'],
['Badlands National Park', 43.785890, -101.90175, 1, 'This is Badlands National Park'],
['Flatirons in the Spring', 39.99948, -105.28370, 3, 'These are the Flatirons in the spring.']
];



function setMarkers(map, markers) {
var myContentDiv = document.getElementById('myDivID');//Reference to you DOM elem

for (var i = 0; i < markers.length; i++) {
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
title: sites[0],
zIndex: sites[3],
html: sites[4]
});

var contentString = "Some content";
//marker.xtraData = 'SomeExtraData';//You can even add more data this way

google.maps.event.addListener(marker, "click", function () {
//alert(this.html);
var myTemplate = '<h1>'+this.title+'<h1><p>'+this.html+'</p>';

myContentDiv.innerHTML = myTemplate;//Inset this html inside link
//infowindow.setContent(this.html);
//infowindow.open(map, this);
});
}
}

我要做的是将“事件”标记更改为不同的图像。我确实看到了google.maps.MarkerImage class 但是当我到目前为止的所有尝试都用 URL 替换了“a”标记(不是我选择的那个),但是在下一次单击(或关闭信息框)时标记不会转换回正常状态。我觉得我已经很接近了,但此刻我陷入了困境。任何帮助将不胜感激。谢谢!

最佳答案

这是我的示例(移植自 Mike Williams' v2 tutorial ):

http://www.geocodezip.com/v3_MW_example_hoverchange.html

一种方法(来自上一个问题的 jsfiddle,已更新): http://jsfiddle.net/geocodezip/r7fu3a1y/1/

工作代码片段:

var infowindow = null;
var gmarkers = [];

var defaultIcon = {
url: 'http://maps.google.com/mapfiles/ms/micons/red-dot.png',
// This marker is 32 pixels wide by 32 pixels tall.
size: new google.maps.Size(32, 32),
// The origin for this image is 0,0.
origin: new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at 0,32.
anchor: new google.maps.Point(16, 32)
};

var activeIcon = {
url: 'http://maps.google.com/mapfiles/ms/micons/yellow-dot.png',
// This marker is 20 pixels wide by 32 pixels tall.
size: new google.maps.Size(32, 32),
// The origin for this image is 0,0.
origin: new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at 0,32.
anchor: new google.maps.Point(16, 32)
};
// Shapes define the clickable region of the icon.
// The type defines an HTML &lt;area&gt; element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var shape = {
coord: [9, 0, 6, 1, 4, 2, 2, 4, 0, 8, 0, 12, 1, 14, 2, 16, 5, 19, 7, 23, 8, 26, 9, 30, 9, 34, 11, 34, 11, 30, 12, 26, 13, 24, 14, 21, 16, 18, 18, 16, 20, 12, 20, 8, 18, 4, 16, 2, 15, 1, 13, 0],
type: 'poly'
};

$(document).ready(function() {
initialize();
});

function initialize() {

var centerMap = new google.maps.LatLng(39.828175, -98.5795);

var myOptions = {
zoom: 4,
center: centerMap,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

setMarkers(map, sites);
infowindow = new google.maps.InfoWindow({
content: "loading..."
});

var bikeLayer = new google.maps.BicyclingLayer();
bikeLayer.setMap(map);
}

var sites = [
['Mount Evans', 39.58108, -105.63535, 4, 'This is Mount Evans.'],
['Irving Homestead', 40.315939, -105.440630, 2, 'This is the Irving Homestead.'],
['Badlands National Park', 43.785890, -101.90175, 1, 'This is Badlands National Park'],
['Flatirons in the Spring', 39.99948, -105.28370, 3, 'These are the Flatirons in the spring.']
];



function setMarkers(map, markers) {

for (var i = 0; i < markers.length; i++) {
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
title: sites[0],
icon: defaultIcon,
zIndex: sites[3],
html: sites[4]
});

var contentString = "Some content";

google.maps.event.addListener(marker, "click", function() {
//alert(this.html);
for (var i = 0; i < gmarkers.length; i++) {
gmarkers[i].setIcon(defaultIcon);
}
this.setIcon(activeIcon);
infowindow.setContent(this.html);
infowindow.open(map, this);
});
gmarkers.push(marker);
}
}
#map_canvas {
width: 600px;
height: 600px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<h1>Map</h1>
<div id="map_canvas"></div>

关于javascript - Google Maps API v3 主动标记 onClick,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12727840/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com