我如何抵消Google地图标记？ [英] How do I offset a Google Map Marker?
本文介绍了我如何抵消Google地图标记？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在这里阅读了几篇关于同一事物的文章。我有使用的代码，但我不确定是否正确使用它。他们没有真正说的一件事是，该代码如何与Google Maps中用于控制参数，样式等的其他JavaScript一起使用。
以下是代码片段从另一个线程：
函数offsetCenter（latlng，offsetx，offsety）{
// latlng是表观中心点
// offsetx是您希望该点向右移动的距离，以像素为单位
//偏移是您希望该点向上移动的距离（以像素为单位）
//偏移量可以是负数
// offsetx和offsety都是可选的
var scale = Math.pow（2，map.getZoom（））;
var worldCoordinateCenter = map.getProjection（）。fromLatLngToPoint（latlng）;
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）;
map.setCenter（newCenter）;
$ p
$ b 这是我现有的Javascript地图：
var latlng = new google.maps.LatLng（0，0）;
var myOptions = {
zoom：16，
center：latlng，
scrollwheel：false，
disableDefaultUI：true，
draggable：false，
keyboardShortcuts：false，
disableDoubleClickZoom：false，
noClear：true，
scaleControl：false，
panControl：false，
streetViewControl：false，
样式：[{featureType：landscape，stylers：[{hue：＃FFBB00}，{saturation：43.400000000000006}，{lightness：37.599999999999994}，{gamma：1 }]}，{ 类型特征： road.highway， 造型器：[{ 色相： ＃FFC200}，{ 饱和： - 61.8}，{ 亮度：45.599999999999994}，{伽马 ：1}]}，{ 类型特征 ： road.arterial， 造型器：[{ 色相： ＃FF0300}，{ 饱和： - 100}，{ 亮度：51.19999999999999 }，{ 伽马：1}]}，{ 类型特征： road.local， 造型器：[{ 色相： ＃FF0300}，{ 饱和： - 100}，{亮度 ：52}，{ 伽马 ：1}]}，{ 类型特征 ： 水， 造型器：[{ 色相： ＃0078FF}，{ 饱和： - 13.20000000000000 3}，{ 亮度：2.4000000000000057}，{ 伽马：1}]}，{ 类型特征： POI， 造型器：[{ 色相： ＃00FF6A}，{ 饱和 ：-1.0989010989011234}，{lightness：11.200000000000017}，{gamma：1}]}]，
mapTypeId：google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map（document.getElementById（map），myOptions）;
var geocoder_map = new google.maps.Geocoder（）;
var address ='11681法赫德国王路，Al Mohammadiyah，4047，利雅得，利雅得省沙特阿拉伯';
geocoder_map.geocode（{
'address'：address
}，function（results，status）{
if（status == google.maps.GeocoderStatus.OK）{
map.setCenter（results [0] .geometry.location）;
var image =../wp-content/themes/rawafid-systems/assets/img/pin.svg;
var marker = new google.maps.Marker（{
map：map，
icon：image，
position：map.getCenter（）
}）;
var contentString ='Tagline';
var infowindow = new google.maps.InfoWindow（{
content：contentString
}）;
google.maps.event.addListener（marker， 'click'，function（）{
infowindow.open（map，marker）;
}）;
} else {
alert（Geocode由于以下原因不成功：+ status）;
}
}）;
如何合并其他文章的摘录？现在，您可以在这里看到，地图标记正好位于中心。我想补偿它，所以它看起来更多的是在右边，所以它不会被隐藏。 调用 offsetCenter 函数设置地图中心之后（位于地理编码器回调函数中）。 .net / geocodezip / vq3erck5 / 2 /rel =nofollow>概念证明小提琴
代码段：
var map; function initialize（）{var latlng = new google.maps。 LatLng（0，0）; var myOptions = {zoom：16，center：latlng，scrollwheel：false，disableDefaultUI：true，draggable：false，keyboardShortcuts：false，disableDoubleClickZoom：false，noClear：true，scaleControl：false，panControl：false，streetViewControl：false，styles： [{featureType：landscape，stylers：[{hue：＃FFBB00}，{saturation：43.400000000000006}，{lightness：37.599999999999994}，{gamma：1}] }，{featureType：road.highway，stylers：[{hue：＃FFC200}，{saturation：-61.8}，{lightness：45.599999999999994}，{gamma ：1}]}，{featureType：road.arterial，stylers：[{hue：＃FF0300}，{saturation：-100}，{lightness：51.19999999999999}， {gamma：1}]}，{featureType：road.local，stylers：[{hue：＃FF03 00}，{saturation：-100}，{lightness：52}，{gamma：1}]}，{featureType：water，stylers：[{hue ＃0078FF}，{饱和度：-13.200000000000003}，{亮度：2.4000000000000057}，{gamma：1}]，{featureType：poi，stylers：[{ ：＃00FF6A}，{saturation：-1.0989010989011234}，{lightness：11.200000000000017}，{gamma：1}]}]，mapTypeId：google.maps.MapTypeId.ROADMAP}; map = new google.maps.Map（document.getElementById（map），myOptions）; var geocoder_map = new google.maps.Geocoder（）; var address ='11681法赫德国王路，Al Mohammadiyah，4047，利雅得，利雅得省沙特阿拉伯'; geocoder_map.geocode（{'address'：address}，function（results，status）{if（status == google.maps.GeocoderStatus.OK）{map.setCenter（results [0] .geometry.location）; var image = http://maps.google.com/mapfiles/ms/micons/blue.png; var marker = new google.maps.Marker（{map：map，icon：image，position：map.getCenter（）}） ; var contentString ='Tagline'; var infowindow = new google.maps.InfoWindow（{content：contentString}）; google.maps.event.addListener（marker，'click'，function（）{infowindow.open（map，marker ）;}）; //将中心向右移动200像素offsetCenter（map.getCenter（），200，0）} else {alert（Geocode由于以下原因不成功：+ status）;}}） ; //创建DIV来保存控件，并调用在此DIV中传递的CenterControl（）//构造函数。 var centerControlDiv = document.createElement（'div'）; var centerControl = new CenterControl（centerControlDiv，map）; centerControlDiv.index = 1; map.controls [google.maps.ControlPosition.LEFT_CENTER] .push（centerControlDiv）;} google.maps.event.addDomListener（window，load，initialize）;函数offsetCenter（latlng，offsetx，offsety）{// latlng is视在中心点//偏移x是您希望该点向右移动的距离（以像素为单位）//偏移是您希望该点向上移动的距离（以像素为单位）//偏移量可以为负值// offsetx和offsety都是可选的var scale = Math.pow（2，map.getZoom（））; var worldCoordinateCenter = map.getProjection（）。fromLatLngToPoint（latlng）; 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）; map.setCenter（newCenter）; } / ** * CenterControl将控件添加到重新映射芝加哥地图的地图上。 *这个构造函数将控制DIV作为参数。 * @constructor * / function CenterControl（controlDiv，map）{//设置控件边框的CSS。 var controlUI = document.createElement（'div'）; controlUI.setAttribute（style，display：block; width：400px; background-color：white; height：100px; border：1px black solid;）; controlUI.style.width ='400px'; controlUI.title ='点击以重新导入地图'; controlDiv.appendChild（controlUI）; //为控件内部设置CSS。 var controlText = document.createElement（'div'）; controlText.style.color ='rgb（25,25,25）'; controlText.style.fontFamily ='Roboto，Arial，sans-serif'; controlText.style.fontSize ='16px'; controlText.style.lineHeight ='38px'; controlText.style.paddingLeft ='5px'; controlText.style.paddingRight ='5px'; controlText.innerHTML ='测试文字'; controlUI.appendChild（controlText）; //设置点击事件监听器：只需将地图设置为芝加哥。 controlUI.addEventListener（'click'，function（）{map.setCenter（chicago）;}）;}
html，body，＃map {height：100％;宽度：100％; margin：0px; < script src =https：//
I've read a few posts on here regarding the same thing. I have the code used, but I'm not sure if I'm using it correctly. The one thing they didn't really say was how would that code be used with the other javascript for Google Maps that controls the parameters, styling, etc.
Here's the snippet from the other thread:
function offsetCenter(latlng, offsetx, offsety) {
// latlng is the apparent centre-point
// offsetx is the distance you want that point to move to the right, in pixels
// offsety is the distance you want that point to move upwards, in pixels
// offset can be negative
// offsetx and offsety are both optional
var scale = Math.pow(2, map.getZoom());
var worldCoordinateCenter = map.getProjection().fromLatLngToPoint(latlng);
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);
map.setCenter(newCenter);
}
And this is my current Javascript for my map:
var latlng = new google.maps.LatLng(0, 0);
var myOptions = {
zoom: 16,
center: latlng,
scrollwheel: false,
disableDefaultUI: true,
draggable: false,
keyboardShortcuts: false,
disableDoubleClickZoom: false,
noClear: true,
scaleControl: false,
panControl: false,
streetViewControl: false,
styles: [{"featureType":"landscape","stylers":[{"hue":"#FFBB00"},{"saturation":43.400000000000006},{"lightness":37.599999999999994},{"gamma":1}]},{"featureType":"road.highway","stylers":[{"hue":"#FFC200"},{"saturation":-61.8},{"lightness":45.599999999999994},{"gamma":1}]},{"featureType":"road.arterial","stylers":[{"hue":"#FF0300"},{"saturation":-100},{"lightness":51.19999999999999},{"gamma":1}]},{"featureType":"road.local","stylers":[{"hue":"#FF0300"},{"saturation":-100},{"lightness":52},{"gamma":1}]},{"featureType":"water","stylers":[{"hue":"#0078FF"},{"saturation":-13.200000000000003},{"lightness":2.4000000000000057},{"gamma":1}]},{"featureType":"poi","stylers":[{"hue":"#00FF6A"},{"saturation":-1.0989010989011234},{"lightness":11.200000000000017},{"gamma":1}]}],
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var geocoder_map = new google.maps.Geocoder();
var address = '11681 King Fahd Road, Al Mohammadiyah, 4047, Riyadh, Riyadh Province Saudi Arabia';
geocoder_map.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var image = "../wp-content/themes/rawafid-systems/assets/img/pin.svg";
var marker = new google.maps.Marker({
map: map,
icon: image,
position: map.getCenter()
});
var contentString = 'Tagline';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
How do I incorporate the snippet from the other article? Right now you can see here that the map marker is right in the center. I'd like to offset it so it appears more to the right so it's not hidden.
解决方案 Call the offsetCenter function after you set the map center (in the geocoder callback function).
code snippet:
var map;
function initialize() {
var latlng = new google.maps.LatLng(0, 0);
var myOptions = {
zoom: 16,
center: latlng,
scrollwheel: false,
disableDefaultUI: true,
draggable: false,
keyboardShortcuts: false,
disableDoubleClickZoom: false,
noClear: true,
scaleControl: false,
panControl: false,
streetViewControl: false,
styles: [{
"featureType": "landscape",
"stylers": [{
"hue": "#FFBB00"
}, {
"saturation": 43.400000000000006
}, {
"lightness": 37.599999999999994
}, {
"gamma": 1
}]
}, {
"featureType": "road.highway",
"stylers": [{
"hue": "#FFC200"
}, {
"saturation": -61.8
}, {
"lightness": 45.599999999999994
}, {
"gamma": 1
}]
}, {
"featureType": "road.arterial",
"stylers": [{
"hue": "#FF0300"
}, {
"saturation": -100
}, {
"lightness": 51.19999999999999
}, {
"gamma": 1
}]
}, {
"featureType": "road.local",
"stylers": [{
"hue": "#FF0300"
}, {
"saturation": -100
}, {
"lightness": 52
}, {
"gamma": 1
}]
}, {
"featureType": "water",
"stylers": [{
"hue": "#0078FF"
}, {
"saturation": -13.200000000000003
}, {
"lightness": 2.4000000000000057
}, {
"gamma": 1
}]
}, {
"featureType": "poi",
"stylers": [{
"hue": "#00FF6A"
}, {
"saturation": -1.0989010989011234
}, {
"lightness": 11.200000000000017
}, {
"gamma": 1
}]
}],
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
var geocoder_map = new google.maps.Geocoder();
var address = '11681 King Fahd Road, Al Mohammadiyah, 4047, Riyadh, Riyadh Province Saudi Arabia';
geocoder_map.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var image = "http://maps.google.com/mapfiles/ms/micons/blue.png";
var marker = new google.maps.Marker({
map: map,
icon: image,
position: map.getCenter()
});
var contentString = 'Tagline';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
// move center 200 pixels to the right.
offsetCenter(map.getCenter(), 200, 0)
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
// Create the DIV to hold the control and call the CenterControl()
// constructor passing in this DIV.
var centerControlDiv = document.createElement('div');
var centerControl = new CenterControl(centerControlDiv, map);
centerControlDiv.index = 1;
map.controls[google.maps.ControlPosition.LEFT_CENTER].push(centerControlDiv);
}
google.maps.event.addDomListener(window, "load", initialize);
function offsetCenter(latlng, offsetx, offsety) {
// latlng is the apparent centre-point
// offsetx is the distance you want that point to move to the right, in pixels
// offsety is the distance you want that point to move upwards, in pixels
// offset can be negative
// offsetx and offsety are both optional
var scale = Math.pow(2, map.getZoom());
var worldCoordinateCenter = map.getProjection().fromLatLngToPoint(latlng);
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);
map.setCenter(newCenter);
}
/**
* The CenterControl adds a control to the map that recenters the map on
* Chicago.
* This constructor takes the control DIV as an argument.
* @constructor
*/
function CenterControl(controlDiv, map) {
// Set CSS for the control border.
var controlUI = document.createElement('div');
controlUI.setAttribute("style", "display:block;width:400px;background-color:white;height:100px; border: 1px black solid;");
controlUI.style.width = '400px';
controlUI.title = 'Click to recenter the map';
controlDiv.appendChild(controlUI);
// Set CSS for the control interior.
var controlText = document.createElement('div');
controlText.style.color = 'rgb(25,25,25)';
controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
controlText.style.fontSize = '16px';
controlText.style.lineHeight = '38px';
controlText.style.paddingLeft = '5px';
controlText.style.paddingRight = '5px';
controlText.innerHTML = 'Test Text';
controlUI.appendChild(controlText);
// Setup the click event listeners: simply set the map to Chicago.
controlUI.addEventListener('click', function() {
map.setCenter(chicago);
});
}
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
这篇关于我如何抵消Google地图标记？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
