Пытаясь переместить центральную позицию карты со смещением pixcel, но получая ошибку! !
Trying to move the the center position of map with pixcel offset but getting error!!
Ошибка Excat ниже:
Uncaught TypeError: Cannot read property 'fromLatLngToPoint' of undefined
Что я уже пробовал:
<pre lang="HTML"><pre><!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body, #map_canvas { margin: 0; padding: 0; height: 100% ;
background-image: ellipse at top right,rgba(255,255,255,.2) 67%,#e7e7e7);
}
</style>
<script type="text/javascript" src=" https://maps.googleapis.com/maps/api/js?"></script>
<script type="text/javascript">
var map;
var grayStyles =
[
{
"elementType": "geometry",
"stylers": [
{
"color": "#f5f5f5",
}
]
},
{
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#c0c0c0"
},
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "poi",
"stylers": [
{ "visibility": "off" }
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry.fill",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry.stroke",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.park",
"stylers": [
{ "visibility": "off" }
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#9e9e9e"
},
{
"visibility": "off"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#dadada"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
},
{
"visibility": "off"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "transit.station",
"elementType": "geometry",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#c9c9c9"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
}
];
var mapOptions = {
center: new google.maps.LatLng(41.327670, 19.8029607),
zoom: 18,
styles: grayStyles,
mapTypeControl: false,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var cityCircle = new google.maps.Circle({
strokeColor: '#000000',
strokeOpacity: 0.0,
strokeWeight: 10,
fillColor: '#000000',
fillOpacity: 0.9 ,
map: map,
center: new google.maps.LatLng(41.327670, 19.8029607),
radius: 1
});
var cityCircle = new google.maps.Circle({
strokeColor: '#bfbfbf',
strokeOpacity: 0.5,
strokeWeight: 1,
fillColor: '#bfbfbf',
fillOpacity: 0.20,
map: map,
center: new google.maps.LatLng(41.327670, 19.8029607),
radius: 10
});
var cityCircle = new google.maps.Circle({
strokeColor: '#bfbfbf',
strokeOpacity: 0.5,
strokeWeight: 1,
fillColor: '#bfbfbf',
fillOpacity: 0.20,
map: map,
center: new google.maps.LatLng(41.327670, 19.8029607),
radius: 20
});
var cityCircle = new google.maps.Circle({
strokeColor: '#bfbfbf',
strokeOpacity: 0.5,
strokeWeight: 1,
fillColor: '#bfbfbf',
fillOpacity: 0.20,
map: map,
center: new google.maps.LatLng(41.327670, 19.8029607),
radius: 30
});
updatemarkerposition(new google.maps.LatLng(41.327670, 19.8029607),225,1117);
}
function updatemarkerposition (latlng, offsetx, offsety) {
var scale = Math.pow(2, 16);
//var nw = new google.maps.LatLng(
// map.getBounds().getNorthEast().lat(),
// map.getBounds().getSouthWest().lng());
var worldCoordinateCenter = map
.getProjection()
.fromLatLngToPoint(marker.getPosition());
var pixelOffset = new google.maps.Point(
offsetx / scale || 0,
offsety / scale || 0
);
var worldCoordinateNewCenter = new google.maps.Point(
worldCoordinateCenter.x - pixelOffset.x,
worldCoordinateCenter.y + pixelOffset.y
);
var newCenter = map
.getProjection()
.fromPointToLatLng(worldCoordinateNewCenter);
console.log(newCenter);
$.productmap.map.setCenter(newCenter);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas" >
<p>heloo</p>
</div>
</body>
</html>
Richard MacCutchan
Переменная с именем map не был инициализирован.
Nawab Ahmad
карта является глобальной переменной и инициализируется в верхней части,пожалуйста, запустите код, а затем ответьте.