javascript 添加标记 - Google Maps API v3

Add Marker - Google Maps API v3

提问by JK0124

I have the following Javascript where I modified the standard Google Maps API initialize() function and the standard addMarker function. The map loads and centers fine, but the marker does not get added to the map. I looked at the previous question, but I'm not sure what I'm doing wrong..

我有以下 Javascript，我在其中修改了标准的 Google Maps API initialize() 函数和标准的 addMarker 函数。地图加载并居中良好，但标记未添加到地图中。我看了上一个问题，但我不确定我做错了什么..

<script type="text/javascript">
// Note that using Google Gears requires loading the Javascript
// at http://code.google.com/apis/gears/gears_init.js

var siberia = new google.maps.LatLng(60, 105);
var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687); 
var usa = new google.maps.LatLng(44.58, -95.46); //middle of the US w 50 states     

var browserSupportFlag =  new Boolean();

function initialize() {
    var myOptions = {
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions)
  map.setCenter(usa);   
}

function getMyLocation() {
    var initialLocation= newyork;
    var myOptions = {
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    // Try W3C Geolocation (Preferred)
    if(navigator.geolocation) {
        browserSupportFlag = true;
        navigator.geolocation.getCurrentPosition(function(position) {
        initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
        map.setCenter(initialLocation);
        addMarker(initialLocation);
    }, function() {
    handleNoGeolocation(browserSupportFlag);
    });
    // Try Google Gears Geolocation
    } else if (google.gears) {
        browserSupportFlag = true;
        var geo = google.gears.factory.create('beta.geolocation');
        geo.getCurrentPosition(function(position) {
        initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
        map.setCenter(initialLocation);
        addMarker(initialLocation);
    }, function() {
        handleNoGeoLocation(browserSupportFlag);
    });
    // Browser doesn't support Geolocation
    } else {
        browserSupportFlag = false;
        handleNoGeolocation(browserSupportFlag);
    }

    function handleNoGeolocation(errorFlag) {
        if (errorFlag == true) {
            alert("Geolocation service failed.");
            initialLocation = newyork;
        } else {
             alert("Your browser doesn't support geolocation. We've placed you in Siberia.");
             initialLocation = siberia;
        }
        map.setCenter(usa);
    }

}

function addMarker(location) {
    marker = new google.maps.Marker({
    position: location,
    map: map, 
    title: "Hello World!"
    });
    //markersArray.push(marker);
}
</script>

采纳答案by Flukey

So your problem is to do with scope:

所以你的问题与范围有关：

Add this above your initilize function:

将其添加到您的初始化函数上方：

var map;

And in your initialize function change this:

在你的初始化函数中改变这个：

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

to this:

对此：

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

You don't need to re-create the map in your getlocation function:

您无需在 getlocation 函数中重新创建地图：

so remove these lines:

所以删除这些行：

   var myOptions = {
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

Here is a jsfiddle with the changes:

这是一个带有更改的 jsfiddle：

http://jsfiddle.net/bQ3AG/

http://jsfiddle.net/bQ3AG/

EDIT: I've just noticed when you pin point their location, you want to set the zoom level to 10.

编辑：我刚刚注意到，当您确定他们的位置时，您想将缩放级别设置为 10。

To do this you can use: map.setZoom(10);instead of passing through new options.

为此，您可以使用：map.setZoom(10);而不是通过新选项。