谷歌地图v3动态设置标记大小
问题在于,我有一个数据库,其中保存有关标记图像的信息:
我正在使用 ajax 调用检索所有内容并将数据保存为对象,这样我就可以检查标记的位置类型并为该类型放置适当的标记的位置。
我接收到的数据很好,但是当我尝试将数据添加到新的谷歌地图图像的构造函数中时,它出错了,我已经检查了一个警报,确认那里有正确的信息,这是什么给出了???
// the following code will wor!!!
new google.maps.Size(32,37) // The Size works
//The following line breaks it with dynamic value
new google.maps.Size(myIconArray.icon[myData.name_etp].size)
这是完整的代码: (静态代码行中的测试值与我正在创建的对象引用中存储的值相同) http://www.focus-on-plants.com/locator_iconed.php
function addMarker(map, myData){
console.log(myData)
// Create the marker
// create the marker info first
myLatLng = new google.maps.LatLng(myData.lat_mdt, myData.lng_mdt);
markersArray.push(myLatLng);
markersInfoArray.push(myData);
// ----------------------------
// NOW CREATE THE ACTUAL ICON
//alert( myIconArray.icon[myData.name_etp].size)
/*var iconimage = new google.maps.MarkerImage(
'/images/icons/markers/flower_lb/image_med.png', //myIconArray.icon[myData.name_etp].image,
new google.maps.Size(myIconArray.icon[myData.name_etp].size) // The Size
//new google.maps.Point(myIconArray.icon[myData.name_etp].origin), // The origin
//new google.maps.Point(myIconArray.icon[myData.name_etp].anchorpoint) // The anchor
);*/
//console.log(iconimage)
var iconshape = {
type: 'poly',
coord: [0,2,1,2,1,1,18,0,18,1,19,2,20,19,19,19,18,21,14,21,10,26,5,21,1,21,1,20,0,20,0,2]
}
//alert(myIconArray.shape[myData.name_etp])
mySize = 'new google.maps.Size('+myIconArray.icon[myData.name_etp].size+')'
var iconimage = new google.maps.MarkerImage(
myIconArray.icon[myData.name_etp].image,
// the following code works!!!
new google.maps.Size(32,37) // The Size works
//The following line breaks iot with dynamic value
//new google.maps.Size(myIconArray.icon[myData.name_etp].size)
//new google.maps.Point(0, 0), // The origin
//new google.maps.Point(13,29) // The anchor
);
var iconshadow = new google.maps.MarkerImage(
'/images/icons/markers/flower_lb/shadow_med.png',
new google.maps.Size(42,18), // The Size
new google.maps.Point(0,0), // The origin
new google.maps.Point(13,18) // The anchor
);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: myData.name_mdt,
icon: iconimage,
shadow: iconshadow//,
//shape: iconshape
});
// Wrapping the event listener inside an anonymous function
// that we immediately invoke and passes the variable i to.
(function(myData, marker) {
// Creating the event listener. It now has access to the values of
// myData and marker as they were during its creation
google.maps.event.addListener(marker, 'click', function() {
//create thecontent for the infowindow
var content = createContent(myData);
var infowindow = new google.maps.InfoWindow({
content: content
});
infowindow.open(map, marker);
});
})(myData, marker);
};
heres the problem, i have a database thats hold information on marker images:
i'm retreiving all that with an ajax call and saving the data as objects, so i can check the location type of the marker and place the appropriate marker for that type of location.
am reciving the data fine but when i try to add the data into the contructor for a new google map image it errors, i have checked with an alert that the right information is there and it is so what gives???
// the following code will wor!!!
new google.maps.Size(32,37) // The Size works
//The following line breaks it with dynamic value
new google.maps.Size(myIconArray.icon[myData.name_etp].size)
heres the full code:
(the test values in the static lines of code are the same values that are stored in the object references i am making)
http://www.focus-on-plants.com/locator_iconed.php
function addMarker(map, myData){
console.log(myData)
// Create the marker
// create the marker info first
myLatLng = new google.maps.LatLng(myData.lat_mdt, myData.lng_mdt);
markersArray.push(myLatLng);
markersInfoArray.push(myData);
// ----------------------------
// NOW CREATE THE ACTUAL ICON
//alert( myIconArray.icon[myData.name_etp].size)
/*var iconimage = new google.maps.MarkerImage(
'/images/icons/markers/flower_lb/image_med.png', //myIconArray.icon[myData.name_etp].image,
new google.maps.Size(myIconArray.icon[myData.name_etp].size) // The Size
//new google.maps.Point(myIconArray.icon[myData.name_etp].origin), // The origin
//new google.maps.Point(myIconArray.icon[myData.name_etp].anchorpoint) // The anchor
);*/
//console.log(iconimage)
var iconshape = {
type: 'poly',
coord: [0,2,1,2,1,1,18,0,18,1,19,2,20,19,19,19,18,21,14,21,10,26,5,21,1,21,1,20,0,20,0,2]
}
//alert(myIconArray.shape[myData.name_etp])
mySize = 'new google.maps.Size('+myIconArray.icon[myData.name_etp].size+')'
var iconimage = new google.maps.MarkerImage(
myIconArray.icon[myData.name_etp].image,
// the following code works!!!
new google.maps.Size(32,37) // The Size works
//The following line breaks iot with dynamic value
//new google.maps.Size(myIconArray.icon[myData.name_etp].size)
//new google.maps.Point(0, 0), // The origin
//new google.maps.Point(13,29) // The anchor
);
var iconshadow = new google.maps.MarkerImage(
'/images/icons/markers/flower_lb/shadow_med.png',
new google.maps.Size(42,18), // The Size
new google.maps.Point(0,0), // The origin
new google.maps.Point(13,18) // The anchor
);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: myData.name_mdt,
icon: iconimage,
shadow: iconshadow//,
//shape: iconshape
});
// Wrapping the event listener inside an anonymous function
// that we immediately invoke and passes the variable i to.
(function(myData, marker) {
// Creating the event listener. It now has access to the values of
// myData and marker as they were during its creation
google.maps.event.addListener(marker, 'click', function() {
//create thecontent for the infowindow
var content = createContent(myData);
var infowindow = new google.maps.InfoWindow({
content: content
});
infowindow.open(map, marker);
});
})(myData, marker);
};
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
好的,所以我找到了原因,
我传递了
new google.maps.Size(myIconArray.icon[myData.name_etp].size)
google imagemaps.size 需要两个单独的参数,
new google.maps.Size(42,18)
我传递了
32, 37
这实际上是一个字符串,我需要使用以下命令拆分字符串:
tmp = myIconArray.icon[myData.name_etp].size.split(",")
然后添加我使用的大小的 x 和 y:
new google.maps.Size(tmp[0], tmp [1])
ok so i found out why this was,
i was passing
new google.maps.Size(myIconArray.icon[myData.name_etp].size)
google image maps.size takes two seperate parameters,
new google.maps.Size(42,18)
i was passing
32, 37
which was actualy a string,i needed to split the string up using the following:
tmp = myIconArray.icon[myData.name_etp].size.split(",")
then to add the x and y for the size i use:
new google.maps.Size(tmp[0], tmp[1])