在js中通过Google Maps API编辑定位点描述标签

Question

我有以下从http://www.geocodezip.com/抓取的JS

我已经在服务器上设置了代码：http://ec2-18-218-221-87.us-east-2.compute.amazonaws.com/alljs_google_maps/closest_places.html

（您可以查看源代码以查看代码。）

如何编辑显示“约翰的比萨饼”的部分 加利福尼亚州弗里蒙特3300 Mowry Blvd”（查看图片）

我希望能够添加图像，并以HTML格式设置地址。我要添加校园位置，我想为校园添加图像并格式化其描述。

由于我要使用PHP，所以我想要一个全JS解决方案，而我不想使用服务器处理资源。

Answer 1

您在the official docs中看到

实例化new google.maps.Marker时，可以指定title参数并编辑内容，以便其表明您想要的内容。

一个例子可能是：

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
  zoom: 4,
  center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Hello World!"
});

// To add the marker to the map, call setMap();
marker.setMap(map);

要更精确地编写代码，您需要：

var locations = [
[ "John's Pizza","no","400 University Ave, Palo Alto, CA","<Polygon><outerBoundaryIs><LinearRing><coordinates>-122.121277,37.386799,0 -122.158012,37.4168,0 -122.158012,37.448151,0 -122.142906,37.456055,0 -122.118874,37.45224,0 -122.107544,37.437793,0 -122.102737,37.422526,0 -122.113037,37.414618,0 -122.121277,37.386799,0   </coordinates></LinearRing></outerBoundaryIs></Polygon>","37.447038,-122.160575","http://maps.google.com/mapfiles/ms/icons/blue.png"],
["JJs Express","yes","1000 Santa Cruz Ave, Menlo Park, CA","<Polygon><outerBoundaryIs><LinearRing><coordinates>-122.200928,37.438611,0 -122.158012,37.4168,0 -122.158012,37.448151,0 -122.142906,37.456055,0 -122.144623,37.475948,0 -122.164192,37.481125,0 -122.189255,37.478673,0 -122.208481,37.468319,0 -122.201271,37.438338,0 </coordinates></LinearRing></outerBoundaryIs></Polygon>","37.448638,-122.187176","http://maps.google.com/mapfiles/ms/icons/green.png"],
["John Paul's Pizzeria","no","1100 El Camino Real, Belmont, CA","<Polygon><outerBoundaryIs><LinearRing><coordinates>-122.304268,37.516534,0 -122.300835,37.505096,0 -122.262383,37.481669,0 -122.242813,37.502917,0 -122.244186,37.534232,0 -122.269249,37.550021,0 -122.291222,37.545122,0 -122.302895,37.537499,0 -122.304268,37.516534,0 </coordinates></LinearRing></outerBoundaryIs></Polygon>","37.520436,-122.275978","http://maps.google.com/mapfiles/ms/icons/red.png"],
["JJs Express","yes","300 E 4th Ave, San Mateo, CA","<Polygon><outerBoundaryIs><LinearRing><coordinates>-122.304268,37.516534,0 -122.348557,37.538044,0 -122.359886,37.56363,0 -122.364006,37.582405,0 -122.33654,37.589207,0 -122.281609,37.570433,0 -122.291222,37.545122,0 -122.302895,37.537499,0 -122.304268,37.516534,0 </coordinates></LinearRing></outerBoundaryIs></Polygon>","37.564435,-122.322080","http://maps.google.com/mapfiles/ms/icons/green.png"],
["John's Pizza","yes","1400 Broadway Ave, Burlingame, CA","<Polygon><outerBoundaryIs><LinearRing><coordinates>-122.374306,37.548933,0 -122.348557,37.538044,0 -122.359886,37.56363,0 -122.364006,37.582405,0 -122.33654,37.589207,0 -122.359543,37.59764,0 -122.372246,37.604712,0 -122.417564,37.594648,0 -122.374306,37.548933,0 </coordinates></LinearRing></outerBoundaryIs></Polygon>","37.584935,-122.366182","http://maps.google.com/mapfiles/ms/icons/blue.png"],
["JJs Express","yes","700 San Bruno Ave, San Bruno, CA","<Polygon><outerBoundaryIs><LinearRing><coordinates>-122.462883,37.628916,0 -122.445374,37.639247,0 -122.426147,37.648762,0 -122.405205,37.642238,0 -122.400055,37.628644,0 -122.392159,37.610696,0 -122.372246,37.604712,0 -122.417564,37.594648,0 -122.462196,37.628644,0  </coordinates></LinearRing></outerBoundaryIs></Polygon>","37.630934,-122.406883","http://maps.google.com/mapfiles/ms/icons/green.png"],
["JJs Express","yes","300 Beach St, San Francisco, CA","<Polygon><outerBoundaryIs><LinearRing><coordinates>-122.43576,37.790795,0 -122.449493,37.801646,0 -122.425461,37.809784,0 -122.402115,37.811411,0 -122.390442,37.794593,0 -122.408295,37.79188,0 -122.434387,37.789167,0 </coordinates></LinearRing></outerBoundaryIs></Polygon>","37.807628,-122.413782","http://maps.google.com/mapfiles/ms/icons/green.png"],
["JJs Express","yes","1400 Haight St, San Francisco, CA","<Polygon><outerBoundaryIs><LinearRing><coordinates>-122.463398,37.760266,0 -122.477349,37.774785,0 -122.427349,37.774785,0 -122.429237,37.763658,0 -122.46357,37.760808,0</coordinates></LinearRing></outerBoundaryIs></Polygon>","37.770129,-122.445082","http://maps.google.com/mapfiles/ms/icons/green.png"],
["JJs Express","yes","2400 Mission St, San Francisco, CA","<Polygon><outerBoundaryIs><LinearRing><coordinates>-122.418766,37.747779,0 -122.425289,37.768951,0 -122.406063,37.769901,0 -122.406063,37.749679,0 -122.418251,37.747508,0 </coordinates></LinearRing></outerBoundaryIs></Polygon>","37.758630,-122.419082","http://maps.google.com/mapfiles/ms/icons/green.png"],
["JJs Express","yes","500 Castro St, Mountain View, CA","<Polygon><outerBoundaryIs><LinearRing><coordinates>-122.121277,37.386799,0 -122.108917,37.362244,0 -122.077675,37.3385,0 -122.064285,37.378615,0 -122.069778,37.3898,0 -122.076645,37.402619,0 -122.078705,37.411619,0 -122.113037,37.414618,0 -122.121277,37.386799,0  </coordinates></LinearRing></outerBoundaryIs></Polygon>","37.390040,-122.081573","http://maps.google.com/mapfiles/ms/icons/green.png"],
["John's Pizza","no","100 S Murphy Ave, Sunnyvale, CA","<Polygon><outerBoundaryIs><LinearRing><coordinates>-122.047119,37.33113,0 -122.065315,37.332495,0 -122.077675,37.3385,0 -122.064285,37.378615,0 -122.036819,37.385162,0 -122.006607,37.382162,0 -122.00386,37.342048,0 -122.047119,37.331403,0  </coordinates></LinearRing></outerBoundaryIs></Polygon>","37.377441,-122.030071","http://maps.google.com/mapfiles/ms/icons/blue.png"],
["John's Pizza","no","1200 Curtner Ave, San Jose, CA","<Polygon><outerBoundaryIs><LinearRing><coordinates>-121.935196,37.345051,0 -121.931076,37.294267,0 -121.871338,37.293721,0 -121.806793,37.293174,0 -121.798553,37.361426,0 -121.879578,37.36088,0 -121.934509,37.345597,0 -121.935196,37.345051,0 </coordinates></LinearRing></outerBoundaryIs></Polygon>","37.288742,-121.890765","http://maps.google.com/mapfiles/ms/icons/blue.png"],
["John's Pizza","yes","700 Blossom Hill Rd, San Jose, CA","<Polygon><outerBoundaryIs><LinearRing><coordinates>-121.935883,37.253287,0 -121.931076,37.294267,0 -121.871338,37.293721,0 -121.806793,37.293174,0 -121.790657,37.234702,0 -121.852455,37.223221,0 -121.935539,37.253014,0 </coordinates></LinearRing></outerBoundaryIs></Polygon>","37.250543,-121.846563","http://maps.google.com/mapfiles/ms/icons/blue.png"],
["John's Pizza","yes","100 N Milpitas Blvd, Milpitas, CA","<Polygon><outerBoundaryIs><LinearRing><coordinates>-121.947556,37.435612,0 -121.934509,37.476493,0 -121.893311,37.469409,0 -121.852798,37.429615,0 -121.843872,37.400165,0 -121.887817,37.3898,0 -121.959915,37.420345,0 -121.959915,37.427979,0 -121.948929,37.435612,0 -121.947556,37.435612,0</coordinates></LinearRing></outerBoundaryIs></Polygon>","37.434113,-121.901139","http://maps.google.com/mapfiles/ms/icons/blue.png"],
["John's Pizza","yes","3300 Mowry Blvd, Fremont, CA","<Polygon><outerBoundaryIs><LinearRing><coordinates>-122.02343,37.52198,0 -122.023773,37.558731,0 -121.989784,37.573426,0 -121.959572,37.566351,0 -121.944466,37.544305,0 -121.967125,37.520891,0 -122.023087,37.522525,0</coordinates></LinearRing></outerBoundaryIs></Polygon>","37.552773,-121.985153","http://maps.google.com/mapfiles/ms/icons/blue.png"]
];

您应该只更改locations数组以具有一个对象，而不是在数组中自由浮动的值，以避免映射到[0]或[1]或[2]位置。 / p>

marker = new google.maps.Marker({         
                            position: pt,         
                            map: map,
                icon: locations[i][5],
                            address: 'Address line (second line on marker)',
                            title: 'Location Name (first line on marker)',
                            html: locations[i][0]+"<br>"+locations[i][2]
                            });                              
            gmarkers.push(marker);

Answer 2

我最终将图像和html添加到html条目中

marker = new google.maps.Marker({
                            position: pt,
                            map: map,
                            icon: locations[i][5],
                            address: '<img> address',
                            title: 'title',
                            html: '<img src="'+imgPath+'"> img address. html formatting here.'
                            });